对博客上最新发布的Sass版本感到困惑？我也是。Sass 3.5.0-RC.1标记了一种新的数据类型：匿名函数。在候选发布公告中，用了四个段落篇幅描述了匿名函数大量的细节，而不显示任何代码。由于并未真正理解它的含义，所以决定深入了解它。

最近有一个项目需求，希望一个简单的列表在一个网格中完美显示，比如只有一个单元格的时候，列表占据整个容器宽度，但总是不太好控制。因此，有时当你忙着一件事情时，问你有没有办法可以实现，我试图使用可以想到的办法，总是会有空白出现，我就会心烦意乱的说，实现不了。

如今很多艺术被超清，高像素图片掩盖了光芒，像素艺术就是其中之一。我在逛CodePen的时候被一些像素作品惊呆了，它们又一次告诉了我像素艺术多么的了不起。

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

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

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

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

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

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

本教程的灵感来自于Envato的最新版本。这个页面的主页功能是展示一系列创意产品(字体、图标、图片模板等等)，而且其布局采用了一个整洁的Isometric网格布局。