CSS Grid是目前CSS中可用的最强大的布局系统。不像flexbox的一维布局那样，这个二维布局系统可以操纵行和列。将父元素（网格容器 Grid Container）和子元素（网格项 Grid Items）分别设置CSS规则即可应用网格布局。

介绍

CSS网格布局（亦直接称为“网格”），这个一个二维网格基准的布局系统完全改变了我们传统创建网格布局界面方式。一直以来，我们用CSS设置我们的页面布局，但是从来都做得不够好。一开始我们用表格（tables），然后是浮动（floats），再是定位（postioning）和行内块（inline-block），但是这些方法都只是hack而已，还留下一大堆麻烦的功能性问题（比如垂直居中）。Flexbox在这其中脱颖而出，不过它只能在一维布局上有所建树，而在更加复杂的二维布局面前就显得力不从心了（Flexbox和Grid组合使用风味更佳）。网格（Grid）是第一个专门用来解决布局问题的CSS模块，我们终于不需要想尽办法hack页面布局样式了。

浏览器支持和基本知识

首先，你得定义一个包裹元素（container element），加上dispaly:grid样式，用grid-template-columns和grid-template-rows设置其子元素模板的【行】【列】样式。

将子元素（child elements）放置到包裹元素之中，对这个子元素应用grid-column和gird-row样式。和flexbox类似的是，网格项的顺序并不重要。你的CSS可以将子元素设置任意的顺序，你还可以用媒体查询（media queries）非常方面地重排元素。想象一下，只要通过几行CSS代码就可以在各种屏幕上重排整个页面，网格布局绝对是有史以来最棒的CSS模块。

到2017年3月为止，很多浏览器已经原生支持而不用前缀定义的Grid属性：Chrome（包括Android），Firefox，Edge，Safari（包括IOS）和Opera。IE10和IE11虽然也能支持，但是它们实现的方式已经老掉牙了，还有一堆过时的语法。

重要术语

在深入网格布局的概念之前，你需要理解一个非常重要的术语。我们这里要介绍的术语长得都非常相像，你如果不去理解其中的含义并记住它们，很快你就会晕头转向了，不过好在这些术语不是很多，现在让我们一起看看吧。

网格容器（Grid Container）

定义：使用display:grid的元素，所有网格项（Grid Items）的直属父级元素。

例子：在这个例子中，div.container就是网格容器。

<div class="container">
<div class="item item-1"></div>
<div class="item item-2"></div>
<div class="item item-3"></div>
</div>

网格项（Grid Item）

定义：网格容器的直接子元素。

例子：在这个例子中，.item就是网格项，但.sub-item不是。

<div class="container">
<div class="item"></div> 
<div class="item">
    <p class="sub-item"></p>
</div>
<div class="item"></div>
</div>

网格分隔线（Grid Line）

定义：组成网格基本结构的分隔线。分隔线可以是垂直的（列分隔线），也可以是水平的（行分隔线）。
例子：这里黄色的竖线就是列分隔线。

网格单元（Grid Cell）

定义：由两个相邻行分隔线和列分隔线交汇出的区域。是网格布局中的最小单元。
例子：第1,2两条行分隔线和第3,4两条列分隔线交汇出的空间。

网格轨道（Grid Track）

定义：两个相邻网格分隔线分隔出来的中间区域。你可以把这个术语看成是网站布局中的一行或者一列。
例子：这里第二条行分隔线和第三条行分隔线之间的区域就是网格轨道。

网格区域（Grid Area）

定义：由4条分隔线交汇出的全部区域。一个网格区域可能由任意多个网格单元组成。
例子：第1,3两条行分隔线和第1,3两条列分隔线交汇出的空间。

基础

介绍