您在设计网页时使用网格系统吗？

Posted 2023-02-22

【中文标题】您在设计网页时使用网格系统吗？

【英文标题】：Do you use a grid system when designing a web page?

【发布时间】：2011-01-25 00:15:47

【问题描述】：

我试图弄清楚我为什么要使用网格系统。我读过一些，但我就是不明白。我习惯于将 html 中的内容放在页面上并完成，但我有一个新项目并想使用网格，因为显然这是一种最佳实践。

我在另一个 SO 问题中引用的一篇文章中读到，它说网格设计处于各种发展阶段，甚至是应用程序表单设计。这让我想到了诸如对齐网格之类的事情，我不知道网页设计领域中的网格是否相同。我希望有人能给我一个简短但不太复杂的视图，而不是我已经使用过的 Google 链接。

感谢您的帮助。

编辑：我发现这个网站最简单：http://www.zurb.com/playground/css-grid-builder 但同样，我如何处理 12 列？列中的所有内容都“粉碎”以适应列吗？这对我来说没有意义。

编辑：我读了the grid 960 tutorial below，感觉好多了，但最后它说：

您也可以在生产代码中使用 Grid 960 的概念，但不建议在生产过程中一直坚持使用框架。 CSS 框架就像任何工具一样，都有它们的用途。考虑到这一点，开始制作原型吧！

我并不想断章取义，但如果我不在生产环境中使用它，那有什么意义呢？我了解原型设计的必要性，但如果我喜欢原型，为什么不使用 960 网格？我可能不明白评论。谢谢。

编辑：

960系统是生产用的吗？

【问题讨论】：

谷歌（是的，我阅读了你的整个帖子）Graphic Design Grid System，因为网格系统在软件出现之前就已经存在了。

谢谢。但我不明白这将如何帮助我进行网页设计。没有对齐网格或任何东西。编程全部在文本编辑器中完成。

如果都是div怎么办？如果它是一张桌子，我可以使用 colspan。我需要了解这一点，这样我才能把它卖给我的同事。我们不是一直在设计，有时会陷入旧习惯，但我想改变它。

net.tutsplus.com/tutorials/html-css-techniques/… 很好地介绍了使用 CSS Grid 构建快速页面原型。

@erik 我读了。谢谢你。但请参阅我的更新。我不确定这一点。

【参考方案1】：

当我设计任何用户界面/网页设计时，我不会关注grid 布局，直到我开始构建我的主要元素。一旦完成，我会实现一个grid，以便与这些主要元素完美融合，以便于进行视觉扫描

【参考方案2】：

我认为您过于专注于将网格应用于 Web 和应用程序，并且需要对网格可用于任何形式的图形和信息设计的根本原因进行一些研究，无论是像素屏幕或手绘墨水在纸上。

我建议你从电脑上退后一步，暂时忘掉 960、div、对齐网格和 HTML，如果可能的话，翻阅几本平面设计书籍和杂志并做一些事情的涂鸦。或者甚至只是拿起一份报纸，想一想他们使用了哪些底层网格（有多少列，它们是否相同宽度，网格在页面或部分之间是否不同，哪些元素粘在网格上，哪些与网格不同？ )。

The Grid System 有一个很好的资源列表。

那么您应该能够更好地考虑一般网格如何对您的项目有用，以及特定模型（例如 960 网格）是否有用。