网站网格设计是使用网格系统为网站创建布局的方法。它充当创建具有视觉吸引力的网站的框架。

几个世纪以来，网格一直是设计历史的一部分，起源于旧印刷机公司使用的信息呈现原则。网格系统及其基本方法来自印刷设计行业。它被用来安排纸张和杂志等印刷资源的排版，并最终被改编成手稿布局。

随着出版公司变得越来越复杂，印刷设计中网格的使用也越来越复杂，这些网格主要用于不同标题、文本、插图和绘图的方向，以获得观众的出色阅读体验。尽管技术发展迅速，但网格和布局系统在随后的几年中仍然具有相关性。

随着现代主义运动的发展，网格的概念在20世纪初的平面设计中仍然存在。Jan Tschichold和Josef Müller-Brockmann等设计师提倡在平面设计中使用网格，以实现设计的清晰度，秩序和效率。网格也成为强调结构和组织在设计中的重要性的重要工具。网格系统的使用仍然是平面设计的基本原则，并继续应用于各种设计学科，特别是在网页设计和开发中。

在基于网站网格的设计时代之前，网页设计师和开发人员只能开发打印设计风格和四四方方的网站布局，这些布局主要由HTML表格和图像提供支持。当时的大多数网站都具有相同的僵化和对比设计，主要为旧台式计算机开发。Web元素和布局是固定的，网站网格设计不是需要考虑或关注的命令性概念。

后来，具有各种尺寸和形状的不同设备主导了市场。固定布局、僵化的重闪动画网站的时代终于结束了。Web专业人员在结构和响应式设计方面面临着不同的问题。出现了许多屏幕密度，并且需要创建设计解决方案以使布局和结构适用于不同的设备，操作系统和浏览器已成为Web设计和开发社区的热门趋势。

凭借其受欢迎程度和灵活性，网格已成为每个网站设计过程中错综复杂的部分，这需要出色的设计技能才能利用。网格使网页设计师和开发人员能够创建具有多行和多列的复杂布局，并能够重叠和分层元素。这提供了以前其他布局网格布局选项无法实现的灵活性和控制级别。网站网格设计系统已成为行业广泛采用的标准。每个网站设计机构都将基于网格的布局集成到他们的工作流程、工具包和第三方框架中。

定义网站设计网格

什么是网页设计中的网格？

网格是列和行（垂直、水平或两者兼而有之，因此称为网格）的不可见线条的视觉结构，用于组织和对齐网页上的内容。

根据网格布局，这些列可以是固定网格或流体网格，这有助于确定页面布局设计中元素的对齐方式和位置。

网格允许将设计的各个部分与其布局区域分开布局，这有助于创建一致且平衡的布局，使用户更容易导航和浏览页面上的信息。网格通常由一组列或多列（无论列数多少）和装订线（由装订线宽度控制）组成，用于定义页面上内容区域或网格部分的大小。柱子和装订沟的大小可以根据设计的需要使用不同的属性（如柱跨度和柱宽）进行调整。

如果您打破现代网格系统的标准，您将意识到网格是形成列的准则像素的复合体。这可以在当今的网页设计和开发阶段看到，包括线框图、原型设计和编码。

网站网格元素

网格如何工作？

通过将网页划分为放置元素的一定数量的列和行，可以使用网格。每个元素都可以放置在这些列和行中。网格的列和行由指定其宽度、高度和间距的 CSS 属性设置。

例如，一个简单的网格结构可以有 12 列，其中每个部分列的宽度为页面网格布局总宽度的 1。装订线（可按装订线宽度设置）可以设置为固定网格或列宽的百分比。然后，可以通过指定内容应占用的一个或多个列来将内容放置在这些列网格中。

在网页设计和开发的背景下学习网格时，需要处理几个术语来掌握网页设计网格的整个概念：

单位

单位是每个网格的最小构建块或分区。这是指正方形或矩形图形，用作布局中元素尺寸的参考。单位通常以像素或磅为单位。

例如，下面是一个网站，其中包含一个带有绿色条纹的 12 个单元的网格，每个网格代表一个单元。

排水沟

装订线是网格布局中两个相邻单元之间的空间。装订线是一种将列、行或模块彼此分隔的空白空间形式，提供一些视觉分隔以提高可读性。

下面，您可以看到浅绿色的线条，它们说明了 12 个单元网格的排水沟。

列

这是指垂直网格划分（也称为列网格），用作放置元素或内容的容器。它包含从布局的顶部到底部运行的单元，并在垂直堆栈中排列Web内容。

下面是使用不同颜色的不同列插图的混合。

为什么网格在网页设计中很重要？

在针对 Web 和移动设备进行设计时，网格系统可以在创建具有视觉吸引力的网站方面带来各种好处。网格系统提供了一致的结构，有助于统一设计和结构。这可确保标题、插图和号召性用语按钮等重要元素在整个网站中保持一致的对齐和间隔，从而使网站访问者轻松阅读。

网格可以水平和垂直划分网页。使用行和列，可以通过网格布局内的列宽轻松控制元素的对齐方式和大小。在为多个网页或布局设计元素时，网格还可以通过模块化网格提供模块化方法。

在网格布局中使用合适的网格布局（例如，列网格、基线网格）和列宽有助于避免杂乱或混乱的外观，并创造视觉上吸引人的和谐感和秩序感。对重要元素使用较大的列网格（固定网格或弹性网格），对不太重要的元素使用较小的网格可以在强调主题时创建更好的用户体验。网格是灵活的设计工具，可以使用响应式网格方法进行调整以适应不同的设备和屏幕尺寸，而不管屏幕大小阈值如何，无论是移动大小还是桌面大小。

网页设计中的网格类型

网站开发中使用了三种典型的网格类型。根据您的目标，每个网格可能最适合特定情况。

1. 列网格

栏目网格是最常见的网站设计和开发网格系统。列网格的工作原理是将布局划分为一系列垂直列，您可以在其中组织和对齐 Web 元素或内容 - 列网格有助于为各种尺寸的屏幕设备开发设计。

总之，列网格提供了一些限制，使您可以快速决定如何排列 Web 内容，而无需过度思考。

2. 模块化网格

模块化网格是列网格的扩展，它以模块化或类似块的格式显示内容。模块化网格包括列和行的交汇点，用于创建一系列大小相等的模块或块，这些模块或块可用于组织内容。

模块化网格并不像许多设计师假设的那样专门使用材料设计，但它们可以与材料设计原则一起使用，以创建一致且有凝聚力的设计系统。

3. 分层网格

分层网格使用要分层显示的列和行来组织内容。这涉及将布局划分为一系列水平行和垂直列，其中最重要的元素或内容放在顶部，最不重要的元素或内容放在底部。

总结

网格不仅为 Web 创建者提供了一个开始的结构，还可以提供设计元素来创建可读、适应性强和有条理的专业级网站。在项目中利用网格系统可以帮助您构建对齐良好且可预测的基于网格的界面，这些界面可以逻辑有效地构建内容。

使用和设置网格的方式会影响设计工作的整体结果，因为它反映了内容层次结构和外观的每个细节。

最后，必须熟悉网格系统的通用术语、原则和最佳实践，以创建一个可以吸引和吸引访问者的经济高效的网站。