Grid

网格布局（Grid）是最强大的 CSS 布局方案。 将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。 Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。 Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。 Grid 布局远比 Flex 布局强大。

.box{
	display:grid;
}

行元素使用flex布局；

.box{
	display:inline-grid;
}

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

</aside>

浏览器支持情况

基本概念

容器(Grid Container)和项目

采用网格布局的区域，称为"容器"（container）。

容器内部采用网格定位的子元素，称为"项目"（item）。

<div>
  <div><p>1</p></div>
  <div><p>2</p></div>
  <div><p>3</p></div>
</div>

• 最外层的<div>元素就是容器,内层的三个<div>元素就是项目

<aside> 💡

注意：项目只能是容器的顶层子元素，不包含项目的子元素，比如上面代码的<p>元素就不是项目。Grid 布局只对项目生效。

</aside>

• 行和列（grid row）

  • 容器里面的水平区域称为"行"，垂直区域称为"列"（column）。

• 单元格（grid cell）

  • 行和列的交叉区域，称为"单元格"。

    例：正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。

    

• 网格线（grid line）

  • 划分网格的线，称为"网格线"。水平网格线划分出行，垂直网格线划分出列。

  • n 行有n + 1 根水平网格线，m 列有m + 1 根垂直网格线，比如三行就有四根水平网格线

    

• 网格轨道(Grid Track)

  • 两条相邻网格线之间的空间。你可以把它们想象成网格的列或行。下图是第二条和第三条行网格线之间的 网格轨道(Grid Track)。