网格布局

网格布局

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

网格内的子元素可以是块级元素，行内元素，行内块

语法：

display:grid;

grid和inline-grid区别:

inline-grid容器为inline特性，因此可以和图片文字一行显示；

grid容器保持块状特性，宽度默认100%，不和内联元素一行显示。

在Grid布局中，所有相关CSS属性正好分为两拨，一拨作用在grid容器上，还有一拨作用在grid子项上

行，列的宽高：

分4列：grid-template-columns: 1fr 1fr 1fr 1fr ;

分4行：grid-template-rows: 1fr 1fr 1fr 1fr;

单位：fr , px , %

或用auto

grid-template-columns: auto auto auto auto

网格间距（gap）:

指的是两个网格单元之间的网格横向间距或网格纵向间距。

属性：

gap (或grid-gap，gap属性是 row-gap 和 column-gap 属性的简写)

column-gap(或grid-column-gap)

row-gap（或grid-row-gap）

属性值：px，%

例子：

结果：

fr关键字:

fr单位：

例子练习：

网格线：

grid-column-start

grid-column-end

grid-row-start

grid-row-end

列与列，行与行之间的交接处就是网格线。

例子：