正在改变网页设计的新 CSS 功能

曾经有一段时间，网页设计变得单调。 设计师和开发人员一遍又一遍地构建相同类型的网站，以至于我们被业内人士嘲笑只创建了两种类型的网站：

您目前正在设计两个可能的网站中的哪一个？ pic.twitter.com/ZD0uRGTqqm

— 乔恩·戈尔德 (@jongold) 2016 年 2 月 2 日

这是我们“创造性”思维所能达到的极限吗？ 这个念头，让我的心中涌起一股无法抑制的悲伤。

我不想承认，但也许那是我们当时能做到的最好的事情。 也许我们没有合适的工具来进行创意设计。 网络的需求正在迅速发展，但我们却被花车和表格等古老的技术所困。

今天，设计格局已经完全改变。 我们配备了新的和强大的工具——CSS Grid、CSS 自定义属性、CSS 形状和 CSS writing-mode等等——我们可以用来锻炼我们的创造力。

CSS Grid 如何改变一切

网格对于网页设计是必不可少的； 你已经知道了。 但是你有没有停下来问自己你是如何设计你主要使用的网格的？

我们大多数人都没有。 我们使用已成为行业标准的 12 列网格。

• 但是为什么我们使用相同的网格呢？
• 为什么网格由 12 列组成？
• 为什么我们的网格大小相同？

以下是我们为什么使用相同网格的一个可能答案：我们不想做数学。

过去，使用基于浮点的网格，要创建三列网格，您需要计算每列的宽度、每个间距的大小以及如何定位每个网格项。 然后，您需要在 HTML 中创建类以适当地设置它们的样式。 这很复杂。

为了让事情变得更简单，我们采用了网格框架。 一开始，960gs 和 1440px 等框架允许我们在 8 列、9 列、12 列甚至 16 列网格之间进行选择。 后来，Bootstrap 赢得了框架大战。 因为 Bootstrap 只允许 12 列，而改变这一点很痛苦，我们最终选择了 12 列作为标准。

但我们不应该责怪 Bootstrap。 这是当时最好的方法。 谁不想要一个用最少的努力就能工作的好解决方案？ 随着网格问题的解决，我们将注意力转向了设计的其他方面，例如排版、颜色和可访问性。

现在，随着 CSS Grid 的出现，网格变得更加简单。 我们不再需要害怕网格数学。 它变得如此简单，以至于我认为使用 CSS 创建网格比使用 Sketch 等设计工具更容易！

为什么？

假设您要制作一个 4 列网格，每列大小为 100 像素。 使用 CSS Grid，您可以在grid-template-columns声明中写四次100px ，然后将创建一个 4 列的网格。

 .grid { display: grid; grid-template-columns: 100px 100px 100px 100px; grid-column-gap: 20px; } 

如果你想要一个 12 列的网格，你只需要重复100px 12 次。

 .grid { display: grid; grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px; grid-column-gap: 20px; } 

是的，代码并不漂亮，但我们并不关心代码质量的优化（目前）——我们仍在考虑设计。 CSS Grid 让任何人（即使是没有编码知识的设计师）都可以轻松地在 Web 上创建网格。

如果要创建具有不同宽度的网格列，只需在grid-template-columns声明中指定所需的宽度，就可以了。

 .grid { display: grid; grid-template-columns: 100px 162px 262px; grid-column-gap: 20px; } 

使网格响应

如果不讨论响应方面，任何关于 CSS 网格的讨论都是不完整的。 有几种方法可以使 CSS Grid 响应式。 一种方法（可能是最流行的方法）是使用fr单位。 另一种方法是使用媒体查询更改列数。

fr是表示分数的灵活长度。 当您使用fr单位时，浏览器会划分开放空间并根据fr倍数将区域分配给列。 这意味着要创建四个大小相等的列，您将写入1fr四次。

 .grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 20px; } 

让我们做一些计算来理解为什么要创建四个大小相等的列。

首先，假设网格可用的总空间为1260px 。

在为每列分配宽度之前，CSS Grid 需要知道有多少可用空间（或剩余空间）。 在这里，它从1260px中减去了grip-gap声明。 由于每个间隙20px ，我们剩下1200px的可用空间。 (1260 - (20 * 3) = 1200) 。

接下来，它将fr倍数相加。 在这种情况下，我们有四个1fr倍数，因此浏览器将1200px除以 4。 因此，每列是300px 。 这就是为什么我们得到四个相等的列。

但是，使用fr单位创建的网格并不总是相等的！

使用fr时，您需要注意每个fr单位是可用（或剩余）空间的一小部分。

如果您的元素比使用fr单位创建的任何列宽，则需要以不同的方式进行计算。

例如，下面的网格有一个大列和三个小（但相等）列，即使它是使用grid-template-columns: 1fr 1fr 1fr 1fr 。

在将1200px分成四个并为1fr列中的每一列分配300px之后，浏览器意识到第一个网格项包含一个1000px的图像。 由于1000px大于300px ，浏览器选择将1000px分配给第一列。

这意味着，我们需要重新计算剩余空间。

新的剩余空间为1260px - 1000px - 20px * 3 = 200px ； 然后根据剩余分数的数量将这200px除以三。 然后每个分数是66px 。 希望这可以解释为什么fr单位并不总是创建等宽的列。

如果您希望fr单元每次都创建等宽列，则需要使用minmax(0, 1fr)强制它。 对于这个特定示例，您还需要将图像的max-width属性设置为 100%。

注意： Rachel Andrew 写了一篇关于不同 CSS 值（min-content、max-content、fr 等）如何影响内容大小的精彩文章。 值得一读！

不等宽网格

要创建宽度不等的网格，您只需改变 fr 倍数。 下面是一个遵循黄金比例的网格，其中第二列是第一列的 1.618 倍，第三列是第二列的 1.618 倍。

 .grid { display: grid; grid-template-columns: 1fr 1.618fr 2.618fr; grid-column-gap: 1em; } 

在不同的断点更改网格

如果你想在不同的断点改变网格，你可以在媒体查询中声明一个新的网格。

 .grid { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 1em; } @media (min-width: 30em) { .grid { grid-template-columns: 1fr 1fr 1fr 1fr; } }

用 CSS Grid 创建网格不是很容易吗？ 早期的设计师和开发人员会因为这种可能性而死。

基于高度的网格

以前不可能根据网站的高度制作网格，因为我们无法判断视口的高度。 现在，有了视口单元、CSS Calc 和 CSS Grid，我们甚至可以根据视口高度制作网格。

在下面的演示中，我根据浏览器的高度创建了网格方块。

Jen Simmons 有一个很棒的视频，它讨论了第四个边缘的设计——使用 CSS Grid。 我强烈建议您观看。

网格项目放置

在过去，定位网格项目是一件很痛苦的事情，因为您必须计算margin-left属性。

现在，使用 CSS Grid，您可以直接使用 CSS 放置网格项目，而无需额外的计算。

 .grid-item { grid-column: 2; /* Put on the second column */ } 

您甚至可以使用span关键字告诉网格项它应该占用多少列。

 .grid-item { /* Put in the second column, span 2 columns */ grid-column: 2 / span 2; } 

启示

CSS Grid 使您可以轻松地进行布局，以便您可以快速创建同一网站的许多变体。 一个典型的例子是 Lynn Fisher 的个人主页。

如果您想了解更多关于 CSS Grid 可以做什么的信息，请查看 Jen Simmon 的实验室，她在那里探索如何使用 CSS Grid 和其他工具创建不同类型的布局。

要了解有关 CSS 网格的更多信息，请查看以下资源：

• 掌握 CSS Grid，Rachel Andrew 和 Jen Simmons 视频教程
• Layout Land, Jen Simmons 一系列关于布局的视频
• CSS 布局研讨会，Rachel Andrew 一个 CSS 布局课程
• Learn CSS Grid, Jonathan Suh 关于 CSS Grid 的免费课程。
• Grid critters, Dave Geddes 学习 CSS Grid 的有趣方式

不规则形状设计

我们习惯于在 Web 上创建矩形布局，因为 CSS 盒子模型是一个矩形。 除了矩形，我们还找到了创建简单形状的方法，例如三角形和圆形。

今天，我们不必止步于此。 使用 CSS 形状和clip-path ，我们可以毫不费力地创建不规则形状。

例如，Aysha Anggraini 使用 CSS Grid 和clip path尝试了漫画风格的布局。

Hui Jing 解释了如何使用 CSS 形状以允许文本沿着 Beyonce 曲线流动。

如果您想深入挖掘，Sara Soueidan 有一篇文章可以帮助您创建非矩形布局。

CSS 形状和clip-path为您提供了创建设计独特的自定义形状的无限可能性。 不幸的是，在语法方面，CSS 形状和clip-path不如 CSS Grid 直观。 幸运的是，我们有诸如 Clippy 和 Firefox 的形状路径编辑器之类的工具来帮助我们创建我们想要的形状。

使用 CSS 的writing-mode切换文本流

我们习惯于在网络上看到单词从左到右流动，因为网络主要是为讲英语的人制作的（至少它是这样开始的）。

但是有些语言并没有朝着那个方向发展。 例如，中文单词可以从上到下和从右到左阅读。

CSS 的writing-mode使文本按照每种语言的本机方向流动。 慧静在一个名为 Penang Hokkien 的网站上尝试了一种从上到下、从右到左的中文布局。 你可以在她的文章“关于家庭的那个”中阅读更多关于她的实验的信息。

除了文章，慧静还有一篇关于排版和writing-mode的精彩演讲，“当东方遇见西方：网页排版及其如何激发现代布局”。 我强烈建议您观看。

即使你不为像中文这样的语言设计，但这并不意味着你不能将 CSS 的writing-mode应用到英文。 早在 2016 年，当我创建 Devfest.asia 时，我发挥了一点创意力量，并选择使用writing-mode旋转文本。

Jen Simmons 的实验室也包含许多关于writing-mode的实验。 我也强烈建议您检查一下。

努力和独创性大有作为

即使新的 CSS 工具很有帮助，您也不需要其中任何一个来创建独特的网站。 一点独创性和一些努力会有很长的路要走。

例如，在 Super Silly Hackathon 中，Cheaun 将整个网站旋转 -15 度，让你在阅读网站时看起来很傻。

Darin Senneff 用一些三角函数和 GSAP 制作了一个动画登录头像。 看看这只猿有多可爱，当你专注于密码字段时，它是如何遮住眼睛的。 与交互式登录表单类似，还有一个非常棒的交互式计算器，可帮助估算使用 JustEat 等外部服务时损失的收入金额！

当我为我的课程 Learn JavaScript 创建销售页面时，我添加了让 JavaScript 学习者感到宾至如归的元素。

包起来

独特的网页设计不仅仅是布局。 这是关于设计如何与内容相结合。 只要稍加努力和独创性，我们所有人都可以创造出独特的设计来与我们的观众交流。 我们今天使用的工具使我们的工作更轻松。

问题是，您是否足够在意做出独特的设计？ 我希望你会。