设计术语词典栅格对齐 / 设计术语词典
栅格与对齐：建立共同的边缘
栅格提供位置的参照，对齐决定元素如何与参照发生关系。先找到共同边缘，再决定是否需要更多列。
词条定义
- 栅格 Grid
- 由行、列和间隙组成的布局参照体系，用来安排元素的位置与跨度。网页 CSS Grid 提供二维布局能力。
- 对齐 Alignment
- 让元素沿共同边缘、中心线或文字基线建立位置关系的做法。对齐不一定需要完整栅格。
一个具体例子
原创教学示例：可用区域宽960px，安排三列卡片，两处间隙各24px，则每列宽为(960−48)÷3=304px。标题可横跨三列，图片与卡片标题沿同一左边缘排列。这个算式只描述该练习的可用区域，尚未包含页面外边距。
把两个概念分清
| 观察对象 | 描述什么 | 使用边界 |
|---|---|---|
| 栅格 | 定义多列、列间隙和跨列方式。 | 三列不是固定要求，窄屏可改为一列。 |
| 对齐 | 检查图片边缘、标题起点和文字基线是否形成关系。 | 视觉居中与几何居中有时需要分别观察。 |
怎样观察与修改
- 标出可用内容区域，先扣除页面两侧边距。
- 按内容需要选择列数，并预留真实间隙，不让卡片紧贴。
- 选择共同对齐基准，例如图片与标题都沿卡片内侧左边缘。
- 在窄屏减少列数，按内容理解顺序保留排列，不把桌面三列直接压缩成细条。
适用情景与限制
适用于画册、卡片目录、作品集与多栏页面。只有一个短段落时，对齐和边距可能已足够，不必为使用栅格而增加复杂性。
相关定义核对：MDN：网格布局的基本概念。示例及改稿步骤为本站原创说明。
动手练习
在三列练习中把间隙改成36px：每列变为296px。比较标题是否多换一行，再决定是否保留这个改动。不要只看空隙是否整齐。
常见问答
跨列会破坏栅格吗？
不会。跨列仍使用既定的网格边界；它可用于容纳较重要或较宽的内容。
网页里的 gap 是什么？
在网格布局语境里是行或列之间的间隙。它与容器外部的页边距不是同一项。