我想通过前面几篇有关于CSS Grid布局的介绍，大家对CSS Grid Layout也略有了解吧，如果你有动手写过的话，你应该可以借助网格线制作一些布局效果出来，比如说单元格布局，合并单元格布局等。是否有一种感觉，CSS Grid Layout好强大，好灵活。是不是期待浏览器厂商早一天能支持。

《CSS Grid布局：网格单元格布局》一文中通过一些简单的实例介绍了如何给容器定义网格，并且怎么使用网格线或者网格区域来实现单元格这样的简单的布局。在文章结尾之处也提到过，这样的单元格如同表格一样，仅仅一个个独立的单元格是无法满足一些复杂的Web布局，我们需要将多个单元格合并在一起，拼装成一个稍为复杂一点的布局。简单点说，就是由单元格慢慢过渡到具有合并单元格的布局（在脑海中想想曾经爱过的table）。

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)。更神奇的是，可以给这些计数器设置独特样式，让其在外观上更靓丽。

去年年底看到Dudley Storey在他的一篇文章《2014年前端将会发生什么》一文中提到，如何在Web页面中实现类似于Photoshop制图软件中图层混合模式的效果，特别的激动。从而也知道CSS混合模式这样的一个概念，觉得特别有意思，加上这段时间看到相关的讨论，我也有点手痒痒，今天也将试试这一神技，给我们Web的效果带来什么样的变化。

在Web制作中，有些时候需要实现一些倒影的效果。比如说，你看到一个美女，你想从另一个角度来看这个MM的风姿。在早前要实现这样的效果我们都必须借助于类似于Photoshop这样的制作图软件来实现，然后通过引入一张image。那么除了图片，我们有没有别的方法能实现呢？值得庆幸的是，到目前为之，CSS3有一个属性可以实现。那么今天我们要给大家介绍的就是这个属性的应用。

RWD设计中图片、视频、iframe元素的根据不同设备分辨的响应是令Web前端开发师最为头痛的问题，目前的种种解决方案都并不是一种完美的解决文案。另外很多时候在Web中，产品展示，发布的图片尺寸都不一定一致，致使我们需要通过一定的程序或者手工修改，以达到一种较为完美的展示方式。这些工作对于我们来说都是一种隐形的开发成本。不过，值得庆幸的是，CSS3提供了两个新的属性object-fit和object-position可以很好的帮我们实现图片的长宽比例，并且能快速响应。只不过到目前为止，支持的浏览器为数不多，但我们应该相信，技术是向前发展的，总有一天，这两个属性会广大的前端开发人员提供便利。如果您对他们感兴趣，不仿花点时间阅读一下。