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

四年前，Jason Grigsby问了我一个出人意料的难题: 你是如何获取响应式图片断点的？一年之后，他得到了答案: 理想情况下，我们会设置响应式图片性能预算实现“在不同大小文件间的跳转。”Cloudinary创建了一种工具实现了这一想法，并且在社区获得了一致性的好评:“太棒了！现在，它还可以实现什么呢？

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

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

我一直喜欢3D。我也开始使用CSS 3D Transform，而且浏览器对它的支持度越来越好。但给我的感觉，使用Transform就是用来创建2D图形，并且使用旋转和位移可以创建一些3D图形。但在实际使用的时候，还是越到了不少的麻烦，而且这些麻烦出乎我的意料。我想或许大家也同样遇到过这样的问题，为了大家在使用CSS 3D Transform能避免这些麻烦，我把我碰到的与在大家分享一下。

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

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

background-repeat是background属性之一，对于前端而言，这是再熟悉不过的属性之一了。那么为什么今天要来聊这个background-repeat属性呢？在CSS2.1中，众所周知，background-repeat属性具有四个常见的值repeat、repeat-x、repeat-y和no-repeat。而今天要说不是这四个属性值，在CSS Backgrounds and Borders Module Level 3中，给background-repeat新增加了两个属性值round和space。在接下的中，要讨论的就是新增的这两个属性值怎么使用，他们具有什么特性。

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