基本概念

MDN上的解释是这样的

CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.

另外，下面一段话摘自A Complete Guide to Grid，对于CSS Grid会有更加清楚地释义

CSS Grid Layout (aka "Grid"), is a two-dimensional grid-based layout system that aims to do nothing less than completely change the way we design grid-based user interfaces.

总结来说：

• CSS Grid 是一个二维的布局系统
• CSS Grid 相比传统布局在页面整体划分布局上更加出色
• CSS Grid 并不是只能单独使用，依然可以搭配Flexbox以及传统定位布局一起使用

兼容性

摘自Can I Use中对CSS Grid的兼容性分析。

从图中可以看出浏览器的兼容率整体达到84.16%，并且都是无需带前缀的。

基本概念

网格是一组相交的水平线和垂直线，它定义了网格的列和行。我们可以将网格元素放置在与这些行和列相关的位置上。

Grid Container (网格容器)

在一个元素上应用了display: grid;或者display: inline-grid;那么就创建了一个网格容器，它下面的直接子元素都会成为网格元素，例如：

<style> .wrapper {   display: grid; } </style>  <div class="wrapper">   <div class="custom">One</div>   <div class="custom">Two     <p>I have some more content in.</p>     <p>This makes me taller than 100 pixels.</p>       </div>   <div class="custom">Three</div>   <div class="custom">Four</div>   <div class="custom">Five</div> </div>

从网页的基本表现看，和平常的布局没有什么差别，Mac OSX 【alt + command + I】，Windows 【F11】打开网页检查器即可看出网格布局。

Grid Tracks (网格轨迹)

从字面上的意译来看还是比较绕口，但是我换一种说法你可能就会明白了。可以把tracks看做是table中的行和列就好了。

定义一个网格中的行和列的数量分别使用grid-template-rows和grid-template-columns来确定这个表格会有多少行以及多少列。例如：

.container {   display: grid;   grid-template-rows: 100px 
                        
关键字：