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
复制代码<font face=”Courier New”><font face=”Arial”>
<div class=”wrapper”>
<div class=”box a”>A</div>
<div class=”box b”>B</div>
<div class=”box c”>C</div>
<div class=”box d”>D</div>
<div class=”box e”>E</div>
<div class=”box f”>F</div>
<div class=”box g”>G</div>
<div class=”box h”>H</div>
<div class=”box i”>I</div>
