Web布局相关的话题一直以来都是一个永恒的话题，不管发展到什么时候，都不会缺这样的话题。一直以来，我都非常推崇CSS Grid的布局模块，在我的认知中，CSS Grid布局是一个强大的布局，它将灵活的解决我们以往在Web中碰到的大多数问题。正因为CSS Grid布局很强大，因此它的体系也很庞大。比如@Juan Martín García就用CSS Grid向大家展示了如何通过一行CSS代码实现特定环境下的响应式布局效果。

随着Web技术不断的革新，CSS近几年也变得多年前要更强大。在Web开发中，CSS是不可或缺的一部分，对于很多Web开发者来说，有很多CSS属性不知道，或者说他们知道，但忘记在最恰当的时候使用最适合的CSS属性。而且时至今日，其中有一些CSS的属性可以让开发者能节约更多的时间。比如说，在Web布局中，现代CSS特性就可以更好的帮助我们快速实现，例如等高布局，水平垂直居中，经典的圣杯布局、宽高比例、页脚保持在底部等。在本文中，我将会介绍一些不同的CSS属性来实现这些效果，希望大家会感兴趣。更希望对大家今后的工作有所帮助。

在《图解CSS：Flexbox布局(Part1)》中主要和大家聊了Flexbox布局模块中的技术术语以及运用于Flex容器上的相关属性。在第二部分，主要和大家介绍运用于Flex项目中的属性，比如align-self、order和flex。这一部分也是Flexbox布局中相当复杂的一部分，因为flex的flex-basis、flex-grow和flex-shrink属性的计算非常复杂，也直接影响到Flex项目的尺寸大小。如果你对这部分感兴趣的话，请继续往下阅读。

CSS布局发展至今可以说变化非常的大，其中Flexbox布局已经取代了以前最为流行的浮动布局。这里所说的Flexbox布局指的就是 CSS Flexible Box Module Level 1（简称Flexbox，弹性布局）。Flexbox模块的出现让Web的布局变得极为简单。虽然Flexbox给Web布局带来了很多优势，而且让布局变得简单，但就Flexbox模块本身来说是非常复杂。在这一章节中，我将和大家一起来探讨CSS的Flexbox 模块相关的知识。

在CSS中可以使用content来生成内容，该特性最早是在CSS2规范中引入的，经过多年的发展，现在该规范已经进入到了Level 3版本。在实际开发中，时常能看到开发人员在伪元素::before和::after中使用content为Web添加内容，只不过这些并不是DOM树中的一员，换句话说，可以在不调整HTML的情况下生成图标、图像、文本等。但很多开发人员可能只知道content添加一个值，事实上它有很多新的特性大家不太了解，接下来这篇文章我们就来和大家探讨这方面的知识。

自Web诞生以来，我们一直习惯于物理CSS属性，比如我们都知道使用margin-top、margin-right、margin-bottom和margin-bottom来设置元素的外边距，但随着书写模式特性的出现，这些物理特性，比如上、右、下和左的概念已经失去了它们的意义。特别是随着越来越多的Web开发人员要处理国际化业务，那么以前的物理特性已经无法满足业务的需求。换句话说，为了具有不同编写模式的多种语言设计页面时，开发人员必须跨多个元素分别调整这些物理属性，这也成了Web开发者的噩梦。幸运的是，CSS的逻辑属性的出现，可以让开发者根据书写模式来维护布局的完整性。即，根据内容的语义顺序进行动态更新。今天这篇文章，我们将和大家一起来探讨CSS的逻辑属性。

一直以来大家都不把CSS当作一门编程语言，是因为他不像其他和程序语言一样具有程序语言的特性，比如变量、函数、逻辑运算等。但随着CSS不断的变革，CSS也越来越像一门程序语言，比如CSS也有变量、逻辑操作和函数等特性。虽然说这些特性不像其他程序语言那么强大，但他实实在在的在变化，而且有了一定的进步。今天主要和大家来聊CSS中的函数。

CSS函数中的min()、max()和clamp()是CSS值和单位模块第九部分，它们常被称为比较函数。这几个函数并不是什么最新的特性，早在2018年年底就有浏览器开始支持它们，今年4月份Firefox也开始支持这几个函数，这也意味着现在所有主流浏览器都支持这些函数。它们最大的作用就是可以为我们提供动态布局和更灵活设计组件方法。简单地说，这几个函数可以用来设置元素尺寸，比如容器大小，字号大小，内距，外距等。在这篇文章中，我将用一些示例和大家一起来探讨这几个函数在实际中的使用，希望能更好的帮助大家理解它们。

记得在第五届中国区的CSS Conf大会上@张鑫旭、@袁川两位老师分享的话题都和视觉以及创意有关的话题，而且在社区中有关于这方面讨论也多，比如说@Lea Verou的《CSS Secrets》一书就有很多介绍CSS用来创建视觉效果的技巧。另外，在社区也有很多关于这方面的介绍，比如CSSArt网站、ASingleDiv网站和CodePen上的SingleDiv等。当然，也有同学私下找我，让我能不能抽空聊聊这方面的话题，那么今天，我们就和大家来聊聊如何使用CSS来实现一些视觉效果，在这里我更倾向于和项目中的一些需求和大家讨论这方面的话题。希望大家对这方面话题感兴趣。

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