CSS Grid：是的，我们可以在网页布局上发挥创意
Is creativity dead for web designers?
关于作者
Eduardo Rosa Iotti 是一名巴西前端开发人员，拥有有趣的背景：毕业于广告专业，从事图形和用户界面设计工作，现在他在 Petlove / DogHero 担任前端工程师。
CSS Grid：释放创造力！
在本文中，我想向您展示 CSS 网格布局在当今 Web 的体验、艺术指导和界面设计方面为我们带来的一些可能性。
我的背景经历赋予了我很多经验，我从这些经历开始是为了让您了解我们将在这个 atricle 中取得的进展。
我们当年的表现如何？
尽管今天我们拿表格布局开玩笑，但在某些时候使用表格来构建网页是主流方法。
但是，让我们跳过这段黑暗的过去，进一步采用更专业的方法来说明我们的零分：
12 列：从 960.gs 引导
我采用的第一个有组织的布局结构目的是 960.gs ，在前端和图形设计项目中（哦，那些 Adobe 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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。