grid 栅格/网格布局学习笔记

1、前言

栅格布局或者说网格布局是很好用的东西，像一些商城类的排版就很适合用栅格布局，但是存在一定的兼容性问题，兼容性暂时还没有研究，这边学习总结是针对grid也就是栅格布局的使用的学习总结，下面将介绍我认为的常用的几个属性，如果想要更详细的学习，可以参考阮一峰老师的grid布局

2、使用

首先是html

<template><div class="grid-box"><div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div><div class="grid-item">4</div><div class="grid-item">5</div><div class="grid-item">6</div><div class="grid-item">7</div><div class="grid-item">8</div><div class="grid-item">9</div>
</div></template>

然后使用grid 布局列与行的列数行数都是根据需求来设置的，可以更改，更详细的可以搜阮一峰老师的grid布局查看，在本文首页有链接

.grid-box {// 栅格布局三行三列display: grid;// 3是多少行列 后面 100px是列宽，行的设置同理grid-template-columns: repeat(3, 100px);grid-template-rows: repeat(3, 100px);.grid-item {font-size: 50px;display: flex;justify-content: center;align-items: center;user-select: none;background: rgb(239,52,41);&:nth-child(2){background: rgb(246,143,37);}&:nth-child(3){background: rgb(75,168,70);}&:nth-child(4){background: rgb(4,118,194);}&:nth-child(5){background: rgb(192,119,175);}&:nth-child(6){background: rgb(248,210,157);}&:nth-child(7){background: rgb(180,168,127);}&:nth-child(8){background: rgb(208,228,168);}&:nth-child(9){background: rgb(77,199,236);}}
}

救会出现这样的效果了

如果想要好看点可以给父容器（.grid-box）加上一点内边距与阴影

padding: 10px;
box-shadow:  0 0 10px #999;

然后就得到了这样效果

此时我么可能会有让各个数字有间隙的需求，此时就可以用上下面两个属性了，也是在父容器设置的

// 行列间距
column-gap: 10px;
row-gap: 10px;

然后效果就是这样的

此时我们克呢该有会有这样的需求，就是按列排，而不是像上面按行排列，此时就需要使用到

 // 默认是按先行后列的，现在也可以改为先列后行 默认值是 rowgrid-auto-flow: column;

然后效果就是这样的

以上内容的完整代码如下

<template><div class="grid-box"><div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div><div class="grid-item">4</div><div class="grid-item">5</div><div class="grid-item">6</div><div class="grid-item">7</div><div class="grid-item">8</div><div class="grid-item">9</div>
</div></template><script setup lang='ts'>
</script>
<style scoped lang="scss">
.grid-box {// 栅格布局三行三列display: grid;// 3是多少行列 后面 100px是列宽，行的设置同理grid-template-columns: repeat(3, 100px);grid-template-rows: repeat(3, 100px);// 行列间距column-gap: 10px;row-gap: 10px;padding: 10px;box-shadow:  0 0 10px #999;// 默认是按先行后列的，现在也可以改为先列后行grid-auto-flow: column;.grid-item {font-size: 50px;display: flex;justify-content: center;align-items: center;user-select: none;background: rgb(239,52,41);&:nth-child(2){background: rgb(246,143,37);}&:nth-child(3){background: rgb(75,168,70);}&:nth-child(4){background: rgb(4,118,194);}&:nth-child(5){background: rgb(192,119,175);}&:nth-child(6){background: rgb(248,210,157);}&:nth-child(7){background: rgb(180,168,127);}&:nth-child(8){background: rgb(208,228,168);}&:nth-child(9){background: rgb(77,199,236);}}
}
</style>

假如每个单元格里面各自有内容，可以是使用以下链各个属性进行布局，它们的值可以是

// 设置单元格的布局,但是这两个属性设置后会减该内容压缩，所以使用的时候要注意
// 他么可以取的值是 start | end | center | stretch
justify-items: center;
align-items: center;

效果是这样的

还可以设置整体内容的排版

// 设置容器内整体内容的排版
// 可取的值为 start | end | center | stretch | space-around | space-between | space-evenly;
justify-content: center;
align-content: center;

效果

以上就是我认为常用的容器的属性，解释一下容器与项目(容器内的第一层子元素（项目里面的元素不是项目）)在这里其实就是

.grid-box与.grid-item

3、项目属性

这里值写四个属性，其实不止，只不过作者是我认为常用的属性

grid-column-start属性：左边框所在的垂直网格线
grid-column-end属性：右边框所在的垂直网格线
grid-row-start属性：上边框所在的水平网格线
grid-row-end属性：下边框所在的水平网格线

// 设置单元格的内容样式
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;

效果

代码：

<template><div class="grid-box"><div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div><div class="grid-item">4</div><div class="grid-item">5</div><div class="grid-item">6</div><div class="grid-item">7</div><div class="grid-item">8</div><div class="grid-item">9</div>
</div></template><script setup lang='ts'>
</script>
<style scoped lang="scss">
.grid-box {// 栅格布局三行三列height: 100%;display: grid;// 3是多少行列 后面 100px是列宽，行的设置同理grid-template-columns: repeat(3, 100px);grid-template-rows: repeat(3, 100px);// 行列间距column-gap: 10px;row-gap: 10px;padding: 10px;box-shadow:  0 0 10px #999;// 默认是按先行后列的，现在也可以改为先列后行()colunm)grid-auto-flow: row;// 设置单元格的布局,但是这两个属性设置后会减该内容压缩，所以使用的时候要注意// justify-items: center;// align-items: center;// 设置容器内整体内容的排版justify-content: center;align-content: center;.grid-item {font-size: 50px;display: flex;justify-content: center;align-items: center;user-select: none;background: rgb(239,52,41);&:nth-child(1) {// 设置单元格的内容样式grid-column-start: 2;grid-column-end: 4;grid-row-start: 1;grid-row-end: 3;}&:nth-child(2){background: rgb(246,143,37);}&:nth-child(3){background: rgb(75,168,70);}&:nth-child(4){background: rgb(4,118,194);}&:nth-child(5){background: rgb(192,119,175);}&:nth-child(6){background: rgb(248,210,157);}&:nth-child(7){background: rgb(180,168,127);}&:nth-child(8){background: rgb(208,228,168);}&:nth-child(9){background: rgb(77,199,236);}}
}
</style>

这是一个组件内容，需要在app.vue中引入使用

以上就是我对grid学习的笔记总结，欢迎批评指正，交流学习