CSS Grid 网格布局心得

定义: gird可自定义程度高的网格布局 (自定义!!!)

主要参数以及语法:

grid-template-columns属性定义每一列的列宽,

grid-template-rows属性定义每一行的行高,

grid-row-gap属性设置行与行的间隔（行间距），

grid-column-gap属性设置列与列的间隔（列间距）。

grid-gap 等同于grid-row-gap与 grid-column-gap简写 (效果自己试试啦)

以上是我常用参数

详细可参考(详细)

grid(inline-grid)属性理解:

定义的盒子就是块级元素(或者是行内块)

div {
  display: grid;
}

 

div {
  display: inline-grid;
}

grid-template-columns 属性,grid-template-rows 属性:

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}

等同于 

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
}

效果展示(上面代码生成了一个三行三列的网格,每个大小都是100*100) 

 

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}

 效果展示(生成每列宽度100px，然后自动填充，直到容器不能放置更多的列。)

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

效果展示(生成两个相同宽度的列,fr可配和像素,百分比使用自动计算剩下的空间 等比例分配) 

  

 

grid-template-columns: 1fr 1fr minmax(100px, 1fr);

minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。 

grid-template-columns: 100px auto 100px;

 上面代码中，第二列的宽度，基本上等于该列单元格的最大宽度，除非单元格内容设置了min-width，且这个值大于最大宽度。

 repeat(),auto-file,fr属性可以更高效的开发复用性样式!

 

grid-row-gap 属性，grid-column-gap 属性，grid-gap 属性

.container {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}

等同于

 

.container {
  grid-gap: 20px 20px;
}

效果展示:

 

 

 gird布局有flex布局的部分属性特点!!

以上就是在下常用属性,如果这些满足不了你的样式需求 请参考本文参考(详细)