从文章标题中不难发现这篇文章要和大家聊的是两个东东，即响应式和网格。从布局系统来说，响应式布局和网格布局都不是什么新东西了。但是他们结合在一起，可以让响应式布局变得更灵活。正如@Keir Watson所说，只要20行代码就可以实现响应式网格布局。不过，我们今天来看两个比较有意思的布局，看上去并不是很容易实现的布局效果。

案例背景和特征

接下来的案例是来自于CodePen上的。在节前看到两个有关于网格的布局，觉得蛮有意思的，所以想以这两个案例为基础，来和大家聊聊怎么通过CSS Grid来实现看上去较为复杂的响应式布局。

第一个案例是来自于@Andy Barefoot的《Responsive CSS Grid - Books》：

第二个案例是来自于@Andy Barefoot的《Responsive Product Grid with layered background》：

这两个案例都有着一些共同的特征，比如说都是响应式布局（即，随着视窗大小，布局会有所差异），就拿第一个案例来说，你尝试着拖动视窗大小时，能看到类似下图这样的效果：

第二个特征是视觉效果有层的叠加，层级看上去较为复杂