看文总结部分。。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)
和的合并简写形式