使用 CSS 网格模板区域为 Web 进行艺术指导
已发表: 2022-03-10（本文由 CoffeeCup Software 赞助。）好吧，我要直截了当。 CSS Grid 非常重要，非常重要，太重要了，不能成为“当所有浏览器都支持它时我会使用它”属性之一。 这是因为，有了 CSS Grid，我们现在可以像在打印中一样在 Web 上进行布局创意，而不会影响可访问性、响应性或可用性。
如果您对网页设计或开发非常认真，那么您也需要认真学习和使用 CSS Grid。 在这篇文章中，我将解释如何使用一个方面，网格模板区域，一种排列元素的方式，即使是像我这样一个又大又笨的杯子也能理解，并且没有得到足够的关注。
现在，你想看一些动作和一些代码，我知道，但是等一下该死的一分钟。 在你学习“如何”之前，我想教你“为什么”制作我们几十年来在其他媒体上看到的那种布局很重要，但在网络上大多没有。
感到沮丧
我猜你已经看过那些“你今天在设计这两种布局中的哪一种？” 推文，感叹网络上当前的设计状态。 甚至我也谈到了网页设计是如何失去它的“灵魂”的。 我敢打赌，你也见过人们使用 CSS Grid 来重新创建杂志中的海报或页面。 这些技术演示很酷，它们展示了与其他方法相比，使用 CSS Grid 实现复杂布局是多么容易，但它们并没有深入了解为什么这样做很重要。
那么是什么原因呢？ 为什么布局在设计中如此重要？ 好吧，这一切都归结为一件事，那就是沟通。
对于似乎永远存在的东西，网页设计师创建了模板，然后填充它们，而很少考虑内容和布局之间的关系。 我想这是不可避免的，考虑到内容管理系统的考虑，我们需要让设计响应，以及我们迄今为止使用的 CSS 属性的限制。 当然，我们已经做出了灵活、可用的设计，但我们一直错过了难题的关键部分，即布局在传递信息中所起的作用。
如果您已经在街区附近转过几次，您就会知道颜色在为设计设定正确基调中所起的作用。 我不需要告诉你类型也起作用。 选择错误的字体，你会冒着沟通效率低下的风险，让人们感觉与你的意图不同。
布局——与“度量”等排版方面密切相关——起着同样重要的作用。 对称与不对称，和谐与张力。 这些原则将人们吸引到您的内容，引导他们并帮助他们更轻松地理解它。 这就是为什么制作正确的布局与选择最合适的字体一样重要。 印刷设计师多年来都知道这一点。
通过艺术指导讲故事
艺术指导在网络上和在其他媒体（包括印刷）中一样重要，我将要介绍的内容同样适用于推广数字产品，也适用于讲故事。
当你听到“艺术指导”这个词时，你会怎么想？ 您是否考虑过使用 <picture> 元素或 HTML 中的“尺寸”来响应式图像，将替代裁剪、尺寸或方向呈现到多种屏幕尺寸？ 它们已成为有用的响应式设计和艺术指导工具，但网页设计不仅仅是工具。
你有没有想过像 Jason Santa Maria 和 Trent Walton 这样的设计师，他们有时会通过为条目提供自己独特的图像、布局和排版来指导他们的写作。 这让我们更接近于理解艺术指导，但图像、布局和排版只是艺术指导的结果，而不是它的意义。
所以如果艺术指导不完全是那些东西，它到底是什么？ 用一句话来说，它是从一段内容中提炼出基本的、精确的含义或目的的艺术——无论是杂志文章还是使用最热门初创公司最酷应用程序的原因列表——并传达该含义或目的更好地使用设计。 我们在网络上没有听到太多关于艺术指导的消息，但它在另一种媒体中已经很成熟了，也许最令人难忘的是杂志，在某种程度上是报纸。
我的年纪还不够大，不记得阿列克谢·布罗多维奇从 1934 年到 1958 年在 Harpers Bazaar 杂志上的第一手作品。
我确实记得 Neville Brody 为 Face 杂志的艺术指导，我仍然每天都受到它的启发。
与网络相关的艺术指导很少被讨论，以至于你认为它不相关是可以原谅的。 也许您将艺术指导视为一种更适合印刷世界而不是网络的活动？ 有些人可能会认为艺术指导在某种程度上是精英主义的。
我不认为这是真的。 故事就是故事，无论它们在哪里被讲述或通过何种媒介讲述。 它们可能像在 ProPublica 上发布的那样发人深省，或者它们可能是您公司的故事以及人们应该与您开展业务的原因。 故事讲述了您的慈善机构如何支持一项公益事业，以及人们为什么应该向它捐款。 然后是您的初创公司的新应用程序的故事以及为什么有人应该下载它。 通过所有这些故事，除了讲述有关您所做或销售的事情的事实之外，还有更深层次的信息。
艺术指导是关于理解这些信息并决定如何通过文字和视觉的组织和呈现来最好地传达它们。 艺术指导与网络相关吗？ 当然。 艺术总监使用设计来帮助人们更好地理解一段内容的重要性，这在网络上和在印刷品中一样重要。 事实上，艺术指导的基本原则在印刷和数字之间并没有改变。
我会更进一步说，艺术指导对于跨多个渠道创造有凝聚力的体验至关重要，这样故事的意义就不会因设备和屏幕尺寸之间的差距而丢失。
大卫希尔曼，前卫报和新政治家和许多其他出版物的设计师说：
“在最佳形式中，（艺术指导）涉及艺术总监对杂志所说的内容进行全面而深入的理解，并通过设计影响它的说法。”
我的朋友马克波特，巧合的是前卫报创意总监也说：
“设计负责空间中元素的分布。”
CSS Grid 使得负责元素的分布比以往任何时候都更有可能。
艺术指导一个冷酷的故事
我想现在是深入研究的时候了，所以我将告诉你如何在一系列Hardboiled示例中使用其中的一些。 我将介绍布局以及它如何帮助讲故事，然后向您介绍如何使用 CSS Grid 开发其中一种设计。
首先，背景故事。 在我的 2010 年版Hardboiled Web Design (1) 的封面上，一位身穿红色连衣裙的神秘女性（总有一位身穿红色连衣裙的女性）正用枪指着我们的私人鸡巴。 （Sheesh，我知道那种感觉。）到 2015 年的第五周年纪念版（2），故事继续进行，一个影子不祥地穿过我们侦探办公室的门。 门飞开了，两个恶棍冲了进来（3），随后发生了一场拳头大战（4）。 我们的神秘女人肯定知道如何挥拳，在你说“吻我，致命的”之前，一个恶棍被绑在椅子上，准备把豆子撒出来（5）。
第三章
我会在这两个恶棍打开门的爆炸性时刻开始讲述这个故事。 现在，如果你读过 Scott McCloud 的书 'Understanding Comics'，你就会知道面板尺寸会影响人们花多长时间看一个区域，所以我想让我们坏人的形象尽可能大，以最大限度地发挥其影响(1)。 头巾们不知道的是，我们的女人正在等他们。 我使用布局通过连接他们的视线来增加张力，（2）同时将读者的眼睛吸引到内容开始的地方。
第四章
当第一个恶棍突然出现时，我使用页面的左边缘（没有边距）来表示打开的门 (1)。 由于大部分动作发生在右侧，我使用页面的大部分高度和宽度创建了一个大空间区域 (2)。
现在，当拳头飞向各个方向时，我们的布局也需要这样做，所以我的内容来自顶部——空白吸引眼球的地方是粗体段落（3）——从左边开始，带有巨大的标题（4） . 你可能想知道为什么我没有在右上角提到那个较小的图像，但我会在一分钟内解决这个问题。
第五章
战斗结束了，我们的侦探重新掌控了局面，所以在最后一页中，我使用了更结构化的布局来反映返回的顺序。 对齐文本的实心列 (1) 周围有大量空白，增加了平静的感觉。 同时，右对齐的标题 (2) 感觉前卫和不舒服，就像正在进行的枪口审讯一样。
弄脏我的头皮
是时候表白了。 我不会教你关于使用 CSS Grid 开发布局的所有知识，因为之前有很多聪明人已经这样做了：
- Rachel Andrew 示例网格
- 与 Wes Bos 一起学习 CSS Grid
- A Complete Guide to Grid by Chris House on CSS Tricks
相反，我将向您展示一个网格的灵感，我如何使用 CSS Grid 中的列和行将其转换为（大屏幕）布局，然后将元素放置到使用grid-template area属性创建的空间区域中。 最后，我将为更小的屏幕尺寸解构和更改设计。
完美的节拍
我使用的布局灵感来自 Neville Brody 1983 年为The Face Magazine设计的这个设计。 我被 Brody 如何巧妙地创建水平轴和垂直轴以及主图像占据的大空间所吸引。
我通过将以下 CSS Grid 属性应用到我的页面的无边距 <body> 元素来做同样的事情，其中一个分数单位宽的列重复五次，它们之间有 2vw 的间隙：
body { margin: 0; padding : 0; display: grid; grid-column-gap : 2vw; grid-template-columns: repeat(5, 1fr); } 
在 CSS Grid 中，我们通过给它一个名称来定义一个网格模块，然后我们使用grid-template-areas属性将一个元素放入单个模块或多个相邻模块（称为空间区域）中。 听起来很复杂吧？ 不，不是。 这是使用 CSS Grid 的最简单和最明显的方法之一，所以让我们开始工作吧。
第一件事，第一件事。 我有五个元素要定位，它们是我的“Kiss Me, Deadly”标题、最大的“横幅”图像、主要内容、旁边的段落和两个图像，fig-1 和 fig-2。 我的 HTML 如下所示：
<body> <picture role="banner">…</picture> <h1 class="title">…</h1> <main>…</main> <aside>…</aside> <img class="fig-1"> <img class="fig-2"> </body>我按照最有意义的顺序编写了该标记，就像我在构建叙述时所做的那样。 它在小屏幕上读起来就像一场梦，甚至没有风格。 我给每个元素一个网格区域值，稍后我将使用它来将它放置在我的网格上：
[role="banner"] { grid-area: banner; } .title { grid-area: title; } main { grid-area: main; } aside { grid-area: aside; } .fig-1 { grid-area: fig-1; } .fig-2 { grid-area: fig-2; }您的网格区域值不一定需要反映您的元素类型。 事实上，您可以使用任何值，甚至可以使用单个字母，例如 a、b、c 或 d。
回到网格，我将三行添加到我之前创建的列中。 每行的高度由其中内容的高度自动定义：
body { grid-template-rows: repeat(3, auto); }这就是魔法发生的地方。 我从字面上使用 grid-template-areas 属性在 CSS 中绘制网格，其中每个句点 (.) 代表一个空模块：
body { grid-template-areas: ". . . . ." ". . . . ." ". . . . ."; }现在是时候使用我之前创建的网格区域值在该网格上定位元素了。 我将每个元素的值放入网格上的一个模块中，如果我在多个相邻模块中重复该值 - 无论是跨列还是跨行，该元素将在它们之间扩展以创建一个空间区域。 留下句点 (.) 将创建一个空白区域：
body { grid-template-areas: ". aside . fig-2 fig-2" "title title banner banner banner" "fig-2 main banner banner banner"; }在我完成布局 CSS 之前，还有一个小细节。 我希望 side 元素的内容位于底部——靠近标题并在其上方留出足够的空白以吸引人们的视线——所以我使用了一个 align-self 属性，这在学习 Flexbox 时可能很熟悉，但有一个“结束”的新值。
aside { align-self: end; } 
剩下的就是添加一些其他样式以使设计栩栩如生，包括醒目的反色方案和明亮的红色口音，将标题中的“致命”一词与我们女士连衣裙的颜色联系起来：
<h1 class="title">Kiss Me, <em>Deadly</em></h1> .title em { font-style: normal; color : #fe3d6b; }冒烟
现在，我知道你一直在想那个较小的战斗图像，我需要承认一些事情。 Natalie Smith 只为我的Hardboiled Shot封面制作了一张完成的拳头飞行插图，但她的草图太好了，不能浪费。 我使用 CSS Grid 将一个铅笔草图的倒置版本放置在枪上方，并使用 CSS 变换旋转它以形成一团烟雾。
打破它
在本文中，我展示了如何为大屏幕创建布局，但实际上，我从一个小屏幕开始，然后使用断点来添加或更改样式。 使用 CSS Grid，使布局适应各种屏幕尺寸就像将元素定位到不同的网格模板区域一样容易。 有两种方法可以做到这一点，首先是改变网格本身：
body { grid-template-columns: 50px repeat(2, 1fr); } @media screen and (min-width : 48em) { body { grid-template-columns: repeat(5, 1fr); } }第二，通过将元素定位到同一网格上的不同网格模板区域：
body { grid-template-areas: "fig-1 aside aside aside aside" "fig-1 title title title title" "banner banner banner banner banner" ".... main main main main"; } @media screen and (min-width : 64em) { body { grid-template-areas: ".... aside .... fig-2 fig-2" "title title banner banner banner" "fig-1 main banner banner banner"; } } 
使用 CSS 网格生成器
网格模板区域使开发艺术导向布局变得如此容易，即使是像我这样的扁平足也可以做到，但如果你是喜欢工具来完成脏工作的类型，CoffeeCup Software 的 CSS Grid Builder 可能只是适合你的东西你。 您以前可能使用过所见即所得的编辑器，因此您可能还记得他们吐出的代码是多么糟糕。 让我阻止你。 CSS Grid Builder 输出干净的 CSS 和可访问的标记。 也许不像你自己写的那么干净，但非常接近，开发它的小团队计划让它变得更好。 我的手写 HTML 如下所示：
<picture role="banner"> <source media="(min-width: 64em)"> <img src="banner-small.png" alt="Kiss Me, Deadly"> </picture>CSS Grid Builder <picture> 元素包含在一个额外的分区中，并添加了一些其他元素以进行很好的衡量：
<div class="responsive-picture banner" role="banner"> <picture> <!--[if IE 9]><video><![endif]--> <source media="(min-width: 64em)"> <!--[if IE 9]></video><![endif]--> <img alt="Kiss Me, Deadly" src="banner-small.png"> </picture> </div>就像我说的，足够接近，如果您不相信我，请从我的Hardboiled示例中下载一组导出文件。 也许这会让你信服。
浏览器的开发工具在检查网格方面越来越好，但 CSS Grid Builder 可以帮助您构建它们。 明显地。 CSS Grid Builder 的核心是一个封装在用户界面中的基于 Chromium 的浏览器，它可以在 macOS 和 Windows 上运行。 这意味着如果浏览器可以渲染它，UI 工具就可以编写它，除了一两个显着的例外，包括 CSS 形状。
事实上，CSS Grid Builder 构建的不仅仅是网格，您可以使用它来创建背景样式——包括非常方便的渐变——边框和排版。 它甚至可以处理Flexbox 和多列布局，但您来这里是因为您想了解 CSS Grid。
环顾界面
CSS Grid Builder 中的界面几乎与您期望的一样，左侧为您进行的设计提供了广阔的区域，右侧为控件。 这些控制包括共同要素； 文本、图像、交互式按钮和表单控件以及布局容器。 如果您需要这些元素之一，请将其拖放到您的工作区域中。
按下以显示样式选项卡，您将找到用于命名类和 ID 属性的控件，在特定断点和特定状态下应用样式。 一切都非常有用，但最有趣的是布局部分——有点不方便地藏在窗格底部。
在本节中，您可以设计一个网格。 设置列和行以形成没有视觉表示的布局可能是学习“网格”如何工作的最困难的部分之一。 该应用程序能够直观地定义网格结构是一个方便的功能，尤其是当您不熟悉 CSS Grid 时。 这是我要解释的部分。
使用 CSS Grid Builder，我添加了一个容器分区。 在工作区中选择它时，我可以访问网格编辑器。 激活它，可视化构建网格所需的所有工具都在那里：
- 添加列和行
- 对齐并证明每个模块中的内容和项目
- 使用包括 fr 和 minmax 在内的每种类型的单位来调整列和行的大小
- 指定间隙
- 命名网格模板区域
- 指定断点
当我对这些设置感到满意时，“确定”更改并将它们应用于工作区的设计。 回到那里，使用滑块在各种断点处预览结果，如果您是那些担心使用无能浏览器的人数减少的人之一，CSS Grid Builder 还提供了可以计算回退的设置。 然后只需将 CSS 样式复制并粘贴到项目中的其他位置或导出整个套件和 caboodle。
CSS Grid Builder 目前是免费的，而 CoffeeCup 正在开发它，如果你喜欢他们正在做的事情，你可以投入几美元来帮助资助它的开发。
打扫干净
我发现很难抑制我对 CSS Grid 的兴奋。 是的，我知道我应该更多地出去，但我确实认为它为我们提供了从其他媒体中吸取教训的最佳机会，使我们创建的网站能够更好地传达我们旨在向观众传达的内容。 无论我们是为想要销售更多产品的企业、需要通过为公益事业捐款筹集更多资金的慈善机构，还是想要更有效地讲述故事的新闻媒体制作网站，CSS Grid 加上深思熟虑、艺术指导的内容都让这一切成为可能。
现在是Hardboiled 。
我希望你喜欢这篇文章，现在在 CodePen 上查看项目文件或下载示例文件。
安迪克拉克的“网络艺术指导”，第一个硬汉网页设计“镜头”。 Shots 是一系列关于“网络艺术指导”、“使用浏览器设计”和“销售创意”的短书，将于 2018 年全年出版。