我们将了解前沿的CSS Grid布局，从而了解CSS Grid布局是如何改变Web的布局。这篇文章是一篇快速入门的文章，将会跳过一些细节和其中的细微差别，其主要是帮助你了解前沿的CSS Grid布局。

在上一节介绍了Grid的基础知识，在前一节的基础上介绍Grid的新特性，怎么样来提高间距的设置以使用fr单位和repeat()实现可伸缩性的布局。

在上一节中，了解了CSS Grid布局中的列和间距，但没有提到网格区域。到目前为止，网格项目都是安置在独立的单元格内，但我们应该打破这样的局限，让网格项目可以超出单元格的界面，实现更多有用的布局。那这一节我们来看怎么实现。

如果需要彻底的对CSS Grid布局有所了解，或者想更好的掌握它，那么必须先了解清楚其相关术语。因为CSS Grid布局中的术语较多，只有掌握了这些术语真正含义，后面才能更好的学习CSS Grid布局相关的特性。那么今天就来看看CSS Grid布局中的相关术语。

在上一节中，主要介绍了CSS Grid布局中网格线、网格布局属性、单元格合并等相关术语，在这篇文章中将继续介绍网络布局中的相关术语：网格区域，网格轨道和网格单元格。希望对大家对学习CSS Grid布局有所帮助。

经过网格术语一和术语二两篇文章，我们对CSS Grid布局中术语有一定的了解。除了这两篇文章提到的术语之外，还有其他相关的术语。这篇文章主要和大家一起来探讨网格。CSS Grid布局说的就是网格，那么网格就是其中最重要的术语之一。接下来，我们要说的就是网格相关的内容。

在本系列的教程当中，你已经熟悉了CSS Grdi的语法，了解了页面布局的一些有效方法，也可以跟以前一些不良的习惯说再见了。在今天这篇文章中，我们将了解有关于CSS Grid布局中有关于响应式网页设计知识。

“Card”这样的UI组件在现在的Web中经常可见，但我们制作这方面的UI组件方式仍然受到一定的限制。直到现在，通过CSS Grid和Flexbox的组合，可以使卡整齐对齐，响应性更好，并适应其中的内容。接下来看看我们是如何制作的。

昨天我在An Event Apart上看了@Rachel Andrew分享的CSS Grid Layout。Grid是CSS一个强大的特性，而且离到来的一天越来越近，它将是一个强大的Web布局模式。当然，那一天还没到，到目前没有稳定的浏览器支持Grid规范。

今天要聊的网格系统不是CSS Grid Layout，而要聊的是类似960gs。到止前为止类似于960gs的网格系统成熟的系统有很多套了。