CSS Grid：是的，我们可以在网页布局上发挥创意

Is creativity dead for web designers?

关于作者

Eduardo Rosa Iotti 是一名巴西前端开发人员，拥有有趣的背景：毕业于广告专业，从事图形和用户界面设计工作，现在他在 Petlove / DogHero 担任前端工程师。

CSS Grid：释放创造力！

在本文中，我想向您展示 CSS 网格布局在当今 Web 的体验、艺术指导和界面设计方面为我们带来的一些可能性。

我的背景经历赋予了我很多经验，我从这些经历开始是为了让您了解我们将在这个 atricle 中取得的进展。

我们当年的表现如何？

尽管今天我们拿表格布局开玩笑，但在某些时候使用表格来构建网页是主流方法。

但是，让我们跳过这段黑暗的过去，进一步采用更专业的方法来说明我们的零分：

12 列：从 960.gs 引导

我采用的第一个有组织的布局结构目的是 960.gs ，在前端和图形设计项目中（哦，那些 Adob​​e Photoshop 网格线和指南模板……）。虽然 12 列网格模板有它的顶峰 引导程序 .

960.gs: the column layout grandfather for webpages.

他们解决了什么样的问题

只是提出旧工具的名称是没有意义的。让我们关注他们解决的问题：列布局。

当时我们还没有原生的方法来解决这个问题，这导致我们的解决方案不一致，特别是在计算不同屏幕尺寸和分辨率之间的列间距时。

直到那些框架进入现场，为我们提供了处理复杂计算问题的实用程序类。

但是，我们又制造了另一个问题

尽管问题解决了，但显然，我们陷入了其他不舒服的境地：现在我们被困在 12 或 16 列中，具有固定的间距、列宽等。

欢迎来到网络布局开始扼杀创造力的时代。现在我们只能解决用户界面交互与 jumbotrons、每行 4 个图像画廊、bla bla bla ......

那么是不是有更多的空间可以在网页布局上发挥创意？平面设计对网络来说已经死了吗？

曾经是这样的，直到 CSS Grid 布局的到来！

现在我们有了一个原生的解决方案来在我们的屏幕上布局东西，我们可以使用这种完美的、图形设计领先的组合来实现它：创造力和工程。

让我们稍微走出网络世界，定义什么是“网格”

网格概念的奠基人之一穆勒-布罗克曼 (Muller-Brockmann) 宣称：“网格系统的使用意味着系统化的意图、寻求清晰的意图、渗透到本质的意图、集中的意图、培养客观性而不是主观性的意图，使生产的创意和技术过程合理化的意图，整合色彩、形式和材料元素的意图，实现建筑对表面和空间的掌握的意图[…]”

或者我们可以用一种非哲学的方式说：在网格内排列表面和空间意味着按照客观和功能标准布置文本、图像和图表。

我们可以更进一步说，响应式布局概念本身就有一个设计良好的网格。这就是说我们必须声明：我们的设计不是强加的（ 960.gs ，引导等...）

The grid

Muller-Brockmann 是一位来自瑞士的平面设计师，以出版的海报而闻名。如今，我们可以将网页直接与海报进行比较，并增加了一层交互性和灵活性。 CSS 网格向我们展示了如何通过创意和功能实现出色的构图。

CSS Grid 重大更改

计量单位： 我们不再需要使用 %，我们可以使用由网格本身计算的分数以及 fr、ems 和 rems（最好）用于与我们正在处理的屏幕成比例的尺寸参考。

断点： 我们不再需要以传统方式使用断点，自动填充、自动调整和 minmax 等网格功能为我们带来了解决响应性问题的灵活性，并针对特定和个性化的情况使用媒体查询。

独立演讲者： 不再局限于 12 个固定栏或类似的东西，我们打开了与艺术指导、品牌声音和用户体验更积极合作的大门。

图形设计师 Jen Simmons，向我们展示了通过 css 网格实现其他复杂布局是多么容易。

现在我们在谈论创造力！

CSS Grid 打开了布局组合方面的创意之门，它鼓励我们创建根据显示界面的屏幕调整的上下文布局和体验。

从技术上讲，我最喜欢的创建适应性体验的方法是使用网格区域，并且对设计和营销团队的变化和创意建议没有太多分歧。

我们会去哪里？

我们有可能与用户体验和界面设计师一起思考构建布局的新方法，这些方法可以打破 12 个固定列的范式，提供更丰富、更具情境化的交互，使图形设计更接近用户体验、用户界面和，当然是通过前端工程实现的！

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/33296/43401309

标签：网页,布局,网格,意图,Grid,我们,CSS
来源： https://www.cnblogs.com/amboke/p/16688175.html