我们将了解前沿的CSS Grid布局，从而了解CSS Grid布局是如何改变Web的布局。这篇文章是一篇快速入门的文章，将会跳过一些细节和其中的细微差别，其主要是帮助你了解前沿的CSS Grid布局。
CSS Grid布局（也常常被称为网格）是一个正在讨论的CSS模块规范，你会发现现在浏览器对其支持很弱。如果你现在开始使用它，你需要在IE11（它支持的是旧规范）、Microsoft Edge、Chrome Cannary或者Firefox Nightly才能看到效果。
在了解网格之前，需要对一些专业术语有所了解。在整个网格中常用到的术语有：网格线（Grid lines）、水平或纵向网格轨道（Grid tracks）。网格轨道其实就相当于行（rows）和列（columns），而且两者之间有一个间距（Gutters）。在网格轨道相交的区域，就是单元格（Grid cells），相当于table中的单元格。这些重要的术语能帮助我们更好的理解Grid。
对于一个平面布局，它看起来和我们熟悉的网格没有两样，两个网格轨道之间的区域称为间距（gutters）：
如果你想跟着下面的内容一起动手创建一个网格，你需要先从CodePen中Fork一份出来。在这个示例的初始化中，我给每个网格项目添加了不同的样式风格。
对，这很容易就做到了。接下来需要定义网格样式风格。也就是设置网格行和列，我们可以通过grid-template-columns和grid-template-rows属性来设置：
你可以看到，每个属性都有五个值。gird-template-columns的每个值分别表示：第一列的宽度是150px，第二个是20px，第三个是150px，以此类推，设置了五列的宽度，最终效果看起来就像芬兰的国旗。grid-template-rows的五个值也是类似的。其中每个都有一个默认值auto，告诉浏览器，其高度是内容的高度，但是我们希望每两行之间需要一个间距，而且这个间距的高度应该是20px。因此我们需要列出所有五行的高度。
每个项目已经按顺序自动构建了一个网格区域。这是没有问题，但网格项目2、4和7发生了什么？它们变成了列间距。如果在网格布局中没有显式的设置，那么网格轨道之间就会构成一个间列。为了让其更像网格的间距，我们需要添加一些其它网格样式规则。
从语法上讲这一点很复杂，但我们要让事情尽可能变得更容易。我们开始给第一个网格项目设置grid-column:1和grid-row:1：
网格项目会自己填充网格线之间的最小可用空间。第二个项目有点不太明显，但我们希望这个也从grid-row:1开始，同时希望跳过grid-column:2，而是从grid-column:3开始。那么第二列就变成了列与列之间的间距。
在本系列教程的下一篇中，我们将深入的分析网格的语法，提高列间距的定义，并且通过fr单位和repeat()函数来创建可伸缩的网格布局，让网格进一步变得更简单。
本文根据@Ian Yates的《CSS Grid Layout: A Quick Start Guide》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处:。
常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3：核心技术与案例实战》。
如果文章中有不对之处，烦请各位大神拍正。如果你觉得这篇文章对你有所帮助，打个赏，让我有更大的动力去创作。(^_^)。看完了？还不过瘾？点击向作者提问！
W3cplus是一个致力于推广国内前端行业的技术博客。它以探索为己任，不断活跃在行业技术最前沿，努力提供高质量前端技术博文；其文章范围广泛，主要以CSS3、HTML5、Javascript、Vue、React、Mobile、动画等教程、译文和案例为主。
W3cplus提供相关广告展示与招聘发布，有需要的请联系：微信号w3cplus，E-mail:
常用昵称“大漠”，W3CPlus创始人，目前就职于淘宝。对HTML5、CSS3和CSS处理器等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3和动画的研究，是国内最早研究和使用CSS3和CSS处理器技术的一批人。现在主要在探讨学习Javascript、React和Vue相关技术知识。CSS3、CSS处理器和Drupal中国布道者。2014年出版《图解CSS3：核心技术与案例实战》。
本书是国内著名的Web前端专家历时2载的心血之作，根据最新的CSS3撰写，融入了作者在CSS领域多年的使用经验，旨在将本书打造成为CSS3领域最权威和实用的专业著作，供没有经验的读者系统学习，供有经验的读者参考备查。
本书理论知识系统全面，详细讲解了选择器、伸缩布局盒模型、渐变、过渡、动画等主题下涵盖的所有CSS3新特性。
湘B2-20110104-7，衡阳市雅米信息技术有限公司 © 2011-2020W3CPLUS，感谢Drupal开源技术。感谢七牛云存储提供静态资源空间。
