CSS 网格布局网格是一组相交的水平线和垂直线，它定义了网格的列和行。CSS 提供了一个基于网格的布局系统，带有行和列，可以让我们更轻松地设计网页，而无需使用浮动和定位。以下是一个简单的网页布局，使用了网格布局，包含六列和三行：尝试一下 »浏览器支持目前最新的一些浏览器版本都支持网格布局。57.0 16.0 52.0 10 44网格元素网格布局由一个父元素及一个或多个子元素组成。实例

尝试一下 »display 属性当一个 HTML 元素将 display 属性设置为 grid 或 inline-grid 后，它就变成了一个网格容器，这个元素的所有直系子元素将成为网格元素。实例.grid-container { display: grid;}尝试一下 »实例.grid-container { display: inline-grid;}尝试一下 »网格轨道我们通过 grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列。这些属性定义了网格的轨道，一个网格轨道就是网格中任意两条线之间的空间。在下图中你可以看到一个绿色框的轨道——网格的第一个行轨道。第二行有三个白色框轨道。以下实例我们使用 grid-template-columns 属性在网格容器中创建四个列:实例.grid-container { display: grid; grid-template-columns: auto auto auto auto;}尝试一下 »以下实例我们使用 grid-template-rows 属性在网格容器中设置行的高度:实例.grid-container { display: grid; grid-template-rows: 100px 300px;}

尝试一下 »fr 单位轨道可以使用任何长度单位进行定义。网格引入了 fr 单位来帮助我们创建灵活的网格轨道。一个 fr 单位代表网格容器中可用空间的一等份。以下实例定义了一个网格定义将创建三个相等宽度的轨道，这些轨道会随着可用空间增长和收缩。实例.grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr;}尝试一下 »网格单元一个网格单元是在一个网格元素中最小的单位， 从概念上来讲其实它和表格的一个单元格很像。现在再看回我们前面的一个例子, 一旦一个网格元素被定义在一个父级元素当中，那么他的子级元素将会排列在每个事先定义好的网格单元中。在下面的图中，我会将第一个网格单元作高亮处理。

网格区域网格元素可以向行或着列的方向扩展一个或多个单元，并且会创建一个网格区域。网格区域的形状应该是一个矩形 - 也就是说你不可能创建出一个类似于"L"形的网格区域。下图高亮的网格区域扩展了2列以及2行。网格列网格元素的垂直线方向称为列（Column）。网格行网格元素的水平线方向称为行（Row）。网格间距网格间距（Column Gap）指的是两个网格单元之间的网格横向间距或网格纵向间距。您可以使用以下属性来调整间隙大小：grid-column-gapgrid-row-gapgrid-gap