CSS Grid布局对于我等来说就是一个全新的布局，但国外很多同行朋友已对这种布局做了全面的探知。前面花了两篇内容（《CSS Grid布局：什么是网格布局》和《CSS Grid布局：浏览器开启CSS Grid Layout》）为这篇文章做足了铺垫。或许你想知道的是如何使用？各位看官不用太急，接下来通过各种实例向大家阐述CSS Grid布局，让我们一起领略其强大的魅力。

上一篇《CSS Grid布局：什么是网格布局》中简单介绍了什么是CSS Grid Layout以及一些概念和术语，为后续学习和使用CSS Grid Layout做了一些铺垫。但浏览器对CSS Grid Layout到目前为止各浏览器厂端支持程度不一致，致使无法全面使用，就算是学习做一些测试示例都还需要做一些设置。那么在这篇文章中，将向大家介绍如何让自己的浏览器支持CSS Grid Layout模块功能。

CSS Grid现在已经被W3C纳入到CSS3的一个布局模块当中，被称为CSS Grid Layout Module。而我们较为熟悉的还是将其想像成网格或者栅格，也就是早期的960gs。不管是网格还是栅格或者现在的CSS Grid Layout Module，我想掌握这些技术对于我们将来在Web项目中实现布局只有好处没有坏处。那么从今天开始我将和大家一起探讨CSS中的网格布局。

CSS Counters其实就是一计数器，早期在CSS中计数器仅存在于ul和ol元素。如果要使用在div这样的元素上，只能通过list-style-image或者是元素的backgroud-image来实现。在CSS2.1的规范中介绍了一种新技术，允许开发人员使用伪类:after、:before或者伪元素::after、::before给任何元素创建自动递增计数器——类似于列表中的项目符号(list-style-type)。更神奇的是，可以给这些计数器设置独特样式，让其在外观上更靓丽。

在几个月之前，我阅读了Harry Roberts写的《Grouping related classes in your markup》一文。他介绍了一个很有趣的概念——用来处理CSS类名。在这篇文章中介绍了使用[]来使用相关的属性，快速选择需要的目标元素。介绍的示例中，讨论了使用类名还是属性声明更易于一目了然选择元素。

BEM在Sass3.3中就已经实现，很容易使用，不过他还是受到一定的限制。Sass3.4的出现，其选择器功能上做了进一步的优化，所以在Sass3.3中使用BEM受到的限制在这里将不在是问题，可以通过自定义的Function做一定的处理，让BEM在Sass中更为强大。

Sass3.4并不是离开Sass3.3的一个开创性版本，并没有做过多的改变，但有一些小变化还是需要留意的。这些功能在Sass3.3测试版本就有显露出一些，但后面会得到更好的细化。我们来看看这些东西，这些东西对于Sass爱好者还是非常值得期待的。

为了把网站Gilt.com在移动端响应，我们基于特殊行动团队确定的几种响应式模式来“响应”我们网站布局。早点确定这些模式有利于帮助我们更有信心地作出响应式相关的决定。在这第四篇响应式相关博文里，我将与你分享如何发现和实现我们确定的最热衷设计模式之一：全屏Modal!

在本系列的第二篇文章中，我的同事Greg Mazurek讲了为什么在项目使用“在选择器内使用媒体查询”。采用这种模式的好处就是在未来开发中代码可维护性更强。那么，接下来我将讨论我们如何把相同的原则应用到测试实践中来。

在第一篇文章中，分享了如何组织一个成功的回顾总结会议。那么在此文章中，主要讨论我们工作中所用到的技术以及如何组织媒体查询。通过实战来介绍在项目中使用块媒体查询好还是在选择器中插入媒体查询方便。