栅格系统布局

声明容器

划分行列

栅格有点类似表格，也 行 和 列。使用 grid-template-columns 规则可划分列数，使用 grid-template-rows 划分行数。

重复设置

使用 repeat 统一设置值，第一个参数为重复数量，第二个参数是重复值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i8Nxk6BA-1643395097830)(栅格系统.assets/image-20220128142508321.png)]

display: grid;
grid-template-rows: repeat(2, 50%);
grid-template-columns: repeat(2, 100px 50px);

自动填充

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gzGmPWQR-1643395097831)(栅格系统.assets/image-20220128143117792.png)]

width: 300px;
height: 240px;
display: grid;
grid-template-rows: repeat(auto-fill, 100px);
grid-template-columns: repeat(auto-fill, 100px);//6 div

比例划分

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eEJBoD5w-1643395097831)(栅格系统.assets/image-20220128143442953.png)]

width: 300px;
height: 100px;
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(2, 1fr 2fr);

组合定义

注意：grid-tempalte 是 grid-template-rows、grid-template-columns、grid-template-areas 的三个属性的简写。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YpPsomSl-1643395097832)(栅格系统.assets/image-20220128143442953.png)]

display: grid;
grid-template: repeat(2, 1fr) / repeat(2, 1fr 2fr);

设置取值范围

使用 minmax 方法可以设置取值范围，下列在行高在 最小100px ~ 最大1fr 间取值。

width: 300px;
height: 300px;
display: grid;
grid-template-rows: 100px minmax(100px, 1fr);//最小100px，最大无穷大
grid-template-columns: 100px 1fr;

间距定义

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M7c61gTP-1643395097832)(栅格系统.assets/image-20220128145609722.png)]

grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(3, 1fr);
row-gap: 20px;
column-gap: 20px;
//简写如下
gap: 20px 10px;

合并单元格

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-a7b6uuoz-1643395097833)(栅格系统.assets/image-20220128151931765.png)]

div:last-child{
      grid-row-start: 1; //第一行开始
      grid-column-start: 1; //第一列开始
      grid-row-end: 3;  //第三行结束
      grid-column-end: 2;  //第二列结束
    }
//简单写法1
grid-row: 1/3;
grid-column: 1/2;
//简单写法2
grid-area: 1/1/3/2;

栅格流动

在容器中设置grid-auto-flow 属性可以改变单元格排列方式。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KcXKv8TQ-1643395097834)(栅格系统.assets/image-20220128170327616.png)]

grid-auto-flow: row dense;

元素对齐方式

可以通过属性方便的定义栅格或元素的对齐方式

justify-content/align-content属性的值如下

简写：place-content：垂直 水平；

justify-items/align-items属性的值如下

简写：place-items:垂直 水平；

justify-self与align-self属性的值如下

简写：place-self:垂直 s

• | ------------------ |
  | start | 元素对齐栅格的左边 |
  | end | 元素对齐栅格的右边 |
  | center | 元素对齐栅格的中间 |
  | stretch | 水平撑满栅格 |

简写：place-self:垂直 s