是时候抛弃设计网格了吗？

我最近访问了这个网站，Gridless Design，它立即引起了共鸣。这是我长期以来一直在思考的事情——通常的设计过程，设计师通常在 12 列网格上传递基于静态模型的设计方式，并不适合目的。我知道我远不是第一个有这种想法的人，但随着近年来 CSS 布局的进步，设计网格比以往任何时候都更像是印刷品的宿醉。一个在网络上我们根本没有的问题的解决方案。 flexbox 和 Grid 等 CSS 布局功能使我们能够构建更灵活的布局来优先考虑内容。我们讨论 CSS 中的内在和外在大小——基于内容和上下文来调整大小。承诺的容器查询规范将为开发人员提供更多的权力。但在我看来，设计过程仍然停留在过去。设计师通常会规定一个元素应该跨越（例如）桌面屏幕上 12 列中的 4 列，却不知道他们在网络上的“列”概念与实际如何构建布局无关。这并不是对任何个人设计师的轻视，但感觉整个行业都需要迎头赶上。在行为方面考虑组件是一个集体失败——布局将如何响应不同类型的内容，以及非典型的视口大小——而不是固定断点。这意味着开发人员在填补空白方面发挥着重要作用。即使您是一名不认为自己是设计师的开发人员，您也是一名设计师。由我们来决定布局在“中间”大小、边缘情况或内容与设计中提供的内容不同的地方如何表现。这需要开发人员的想象力和设计思维。考虑以下组件，由标题、图像和文本段落组成。如果我们在严格的指导下遵循设计网格，那么一旦我们开始调整屏幕大小，布局就会开始看起来不那么讨人喜欢。但考虑到构建更灵活布局的自由，我们可以优先考虑内容——使用元素的内在大小来决定空间的分布。在此视频中，第一个组件强制每个元素坚持指定的网格。当我们调整视口大小时，布局几乎立即开始看起来破碎，因为每个网格子元素按比例变窄。第二个组件保留了元素的宽度，但随着屏幕变窄缩小了它们之间的间隙，尽管没有遵守严格的网格，但可以说是更令人愉悦（更不用说易读）的布局。类似地，来自 Gridless Design 站点的这句话很好地总结了卡片布局如何响应上下文，而不是由设计决定的固定列。

CSS 网格语法允许子项根据需要重排到新列中。列可以通过其子项中的内容或可用空间的一小部分来了解其大小。这种技术对于卡片布局非常强大，允许卡片与指定列允许的一样大，并在它可能变得太小时时换行到下一行。许多开发人员都在我们的 CSS 工具集中拥抱创新。 Andy Bell 和 Heydon Pickering 创建了 Every Layout，它帮助开发人员学会接受网络固有的灵活性和不可知性，以构建适用于可变内容的弹性布局。很高兴看到设计工具有更多创新，以鼓励设计师以类似的方式思考。设计和开发过程中的良好沟通也有帮助，尽管不是每个人都有这种奢侈。但开发人员并非完全没有责任。部分问题也是 CSS 框架。 Tailwind、Bootstrap 和许多其他工具都带有类，这些类使得构建遵循简单网格的布局变得微不足道。但是如果我们想要构建一个灵活、健壮、内容感知的布局，你需要超越框架并编写一些自定义 CSS。矛盾的是，CSS Grid 的亮点不仅在于构建遵循严格设计网格的布局，还在于将灵活性融入到我们的组件中。但是选择快速简便的解决方案而不是最好的解决方案的诱惑是难以抗拒的。感觉我们需要在这里进行一次大的行业重组。我们不应该将内容强加到一个僵化的设计网格中以损害用户体验。用户不会注意到您的设计是否与 12 列网格不完全对齐。如果他们不能使用您建立的网站，他们会注意到。在这些情况下，网格只为设计师的自我服务。这就是为什么我很高兴看到 Gridless Design 网站提倡完全抛弃网格。对于某些人来说，这听起来可能是一个激进的主张，但这篇文章很好地解释了其他设备（例如空间格式塔原理、接近度和连续性）如何在没有网格的情况下实现良好的设计。该站点提供的解释比我在这里的解释要好得多，因此请查看。