Grid网格布局

看文总结部分。。https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。

 

行 （row） 列（column）

1.display 属性： display:grid;   display: inline-grid

设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

2.grid-template-columns 属性，
grid-template-rows 属性

grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。可以设置百分比，如果相同的可以用repeat，grid-template-columns:repeat(33.3%),auto-fill不知宽高可以自动填充，直到容器不能放置更多的列

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

表示每列宽度100px，然后自动填充，直到容器不能放置更多的列。

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

grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。grid-gap属性是（grid-row-gap，grid-column-gap）和的合并简写形式