CSS Grid布局对于我等来说就是一个全新的布局，但国外很多同行朋友已对这种布局做了全面的探知。前面花了两篇内容（《CSS Grid布局教程之什么是网格布局》和《CSS Grid布局教程之浏览器开启CSS Grid Layout汇总》）为这篇文章做足了铺垫。或许你想知道的是如何使用？各位看官不用太急，接下来通过各种实例向大家阐述CSS Grid布局，让我们一起领略其强大的魅力。
当然，接下来的示例不是我想出来的，这是我挖出来的，主要制作者是Rachel Andrew。在继续往下阅读之前，我们应该一起感谢Rachel Andrew，感谢他给我们提供这么多有关于CSS Grid Layout的示例。同时如果你想在你的浏览器中能正常的演示接下的有关于CSS Grid Layout的示例，你得先保证你已阅读了《CSS Grid布局教程之浏览器开启CSS Grid Layout汇总》一文，并且按照文章中的方法进行过设置。如果没有话，或许你将看不到下面示例的效果。咱也不纠结了，开始实战吧。
定义一个网格可以给父容器的display属性设置为grid或者inline-grid来定义一个网格。这样你就可以使用grid-template-columns和grid-template-rows属性来创建一个网格。
在这个示例中，创建了一个三列网格，其中三个列的列宽是100px，并且指定列与列之间的间距为10px。同时网格具有三行，每行的高度是自动的，另外行与行之间的间距是10px。简单点说就是一个三行三列的网格，并且列与列之间，行与行之间的间距都是10px。
此时浏览器将容器中的子元素自动填入到每个网格单元格中，当超过指定的列数时，网格会自动换行，如下图所示：
看看代码是怎么完成的：
HTML
CSS
定义网格的关键代码：
从示例效果中可以看出，.wrapper容器通过display:grid;定义成网格，并且使用grid-template-columns:100px 10px 100px 10px 100px;和grid-template-rows:auto 10px auto;指定了列宽、列间距，行高和行间距等。对应的子元素.a、.c、.e、.f、.h和.j列宽度为100px(也就是黑色区域),而.b、.d、.g和.i是列与列的间距10px(也就是红色区域)。而且当子元素在一行填不下时，就会自动换行，如.f～.j自动换到第二行显示。
网格中的单元格是有网格线划分出来的，那么在网格布局中，同样可以使用网格线来给子元素设置占位区域。基于上例，在容器.wrapper下面有十个子元素.a~.j，接下来看如何通过基于网格线来实现各种在网格布局中的区域。
对于网格线，在网格布局中有两种，一种是列线,另一种是行线。对应的个网格单元格都有列线起始线（grid-column-start）、列线终止线(grid-column-end)和行线起始线（grid-row-start）、行线终止线（grid-row-end）。
如上图所示，紫色的是列网格线，而蓝色的是行网格线，其中高亮大红的那个单元格列起始线是line3，列终止线是line4，行起始线是line3，行终止线是line4。也就是说这四条网格线间的区域是一个单元格。
接下来，看一个示例，如何用网格线实现单元格占位区域：
HTML
CSS
在线案例
这种方式可以让你的子元素.a~.b定位在任何位置，比如说，你现在想要.a和.f对换，那么很简单就能实现：