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
新闻热点
疑难解答
