现代栅格设计之一

基于前两轮对趋势的梳理，这里直接给出一套贴合现代核心变化（CSS Grid 内在尺寸、容器查询、子网格）的栅格设计推荐。它不再以一个固定的列数（如12、24）作为首要约束，而是以内容自适应、空间连续为原则，覆盖 1920×1080 桌面和安卓手机（以 360–412dp 为典型）。

---

一、现代栅格的核心变化（设计思维的转变）

在给具体数值前，先明确我们不再做什么：

• ❌ 不再定义全局固定列数（如“整个页面都是 24 列”），改为每个区域拥有自己的独立网格。
• ❌ 不再依赖视口断点硬切换列数，改为利用 minmax、auto-fit 让布局连续过渡。
• ❌ 不再用手动计算百分比，改为用网格轨道和弹性单位让浏览器自动分配空间。

取而代之的是三个核心策略：

1. 页面级布局：用命名网格区域或固定+弹性轨道定义大框架。
2. 组件级布局：用内在尺寸（auto-fit/auto-fill + minmax）让内容自己决定列数。
3. 对齐与间距：用 gap 统一管理，并用设计令牌（spacing scale）保证一致性。

---

二、1920×1080 桌面端的现代栅格设计

1. 页面整体框架：弹性内容区 + 最大宽度约束

避免在大屏上无限制拉伸，采用居中的弹性内容容器，宽度由 clamp() 或 min() 限定。

推荐设置：

.page-container {
  max-width: 1440px;          /* 内容最佳阅读宽度上限 */
  width: min(100% - 2rem, 1440px); /* 小屏时自动留出边距 */
  margin-inline: auto;
}

如果需要侧边栏（如后台系统），使用 CSS Grid 的固定+弹性轨道：

.app-layout {
  display: grid;
  grid-template-columns: auto 1fr;   /* 侧边栏自适应内容宽度，主区域占满剩余 */
  /* 或更精确：grid-template-columns: 240px 1fr; */
  min-height: 100vh;
}

这里不再需要 12 或 24 列——大的框架本身就是两列网格，命名方式更直观。

2. 内容区域内部的弹性网格：卡片/仪表板/列表

传统做法是“一行 4 个卡片，每个占 6 列（24 栅格）”。现代做法直接交给 auto-fit：

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

• 当容器宽度为 1440px 时，自动生成 4–5 列。
• 窗口缩小到 1000px 左右时，自动变成 3 列。
• 整个过程没有断点，没有列数切换，完全是内容驱动的连续适应。

如果需要在特定区域强行保持固定比例（如 2:1 的主次关系），直接定义轨道：

.feature-section {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
}

这比用“占 16 列和 8 列”更直接，也更易维护。

3. 间距与对齐：统一 gap + 子网格对齐

• 间距尺度：建立一套 4px 递增的 spacing 令牌（4, 8, 12, 16, 24, 32, 48, 64...），所有 gap 和 padding 严格遵循。
• 卡片内部对齐：如果希望不同卡片内的标题、按钮能水平对齐，使用 subgrid：

.card-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  /* 需要时在行方向建立子网格 */
  grid-template-rows: auto 1fr auto; /* 标题、内容、操作区 */
}
.card {
  display: grid;
  grid-row: span 3; /* 让每个卡片占据整行格子 */
  grid-template-rows: subgrid; /* 继承父网格的行轨道，实现跨卡片垂直对齐 */
}

这是 24 栅格完全做不到的精细化对齐。

4. 1920 下的实际效果

• 窗口 1920px 宽时，.page-container 保持 1440px 居中，两侧留白约 240px。
• 内部卡片网格可能是 4 列（每列约 330px），完美利用空间。
• 如果用户缩小浏览器窗口，卡片会平滑减少列数，直到宽度低于 minmax 阈值时自然变为单列，无需任何媒体查询。

---

三、安卓手机端的现代栅格设计（以 360–412dp 为基准）

安卓屏幕碎片化严重，但设计基准通常取 360dp 宽（如 Pixel 4a）或 412dp（如多款主流机型）。现代做法不设计固定栅格，而是建立一套自适应的空间规则。

1. 基础边距与安全区

• 全局水平边距：统一 16dp（安全且符合 Material Design 3 规范）。
• 内容宽度：100% - 32dp，自动撑满。
• 间距：使用相同的 spacing 令牌，但手机端更紧凑，常用 8dp、12dp、16dp。

2. 组件布局：用弹性列和容器查询

对于手机端，绝大多数内容块是通栏排列。但像设置列表中的开关行、卡片小网格等，需要一种“微栅格”：

方法一：自动两列卡片（横竖屏通用）

.small-card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140dp, 1fr));
  gap: 12dp;
}

• 在 360dp 宽屏幕上，140dp × 2 + 12dp 间隙刚好能容纳两列。
• 如果屏幕只有 320dp，会自动变为一列。
• 旋转到横屏（比如 640dp）时，可能生成 3–4 列。

方法二：容器查询实现内部布局切换
对于像“列表项”这种单个组件内部可能需要不同排版的情况：

.list-item {
  container-type: inline-size;
}
@container (min-width: 300dp) {
  .item-content {
    grid-template-columns: auto 1fr auto; /* 图标、文字、操作 */
  }
}
@container (max-width: 299dp) {
  .item-content {
    grid-template-columns: 1fr; /* 叠放 */
  }
}

这完全脱离了对全局断点或全局列数的依赖，组件自己决定怎么排列。

3. 页面级布局

手机端一般不需要侧边栏，页面就是单列内容流：

.mobile-page {
  display: flex;
  flex-direction: column;
  gap: 24dp;
  padding: 16dp;
}

如果需要底部导航栏，直接使用固定定位 + flex 布局，不需要网格参与。

4. 设计令牌统一桌手机

同一套 spacing 令牌，只是手机端选取较小的值。例如：

• 桌面卡片间距：24px
• 手机卡片间距：16px
  但它们都是同一个变量 --spacing-md 和 --spacing-sm，通过设计系统维护。

---

四、交付给设计师的现代设计栅格规范（Figma/代码映射）

如果需要在设计工具里表达这种“无固定列数”的系统，可以这样定义：

设计参数	桌面（1920 画板）	安卓手机（360/412 画板）
内容区最大宽度	1440px（居中）	全宽（左右各留 16px）
列定义方式	弹性网格，轨道由 minmax 定义	弹性网格，轨道由 minmax 定义
水平间距	24px (主)，16px (次)	16px (主)，12px (次)
垂直间距	32px/24px (区块)，16px (组件内)	24px/16px (区块)，12px (组件内)
卡片网格典型表现	minmax(280px, 1fr)，自动 4–5 列	minmax(140px, 1fr)，自动 1–2 列
对齐特性	支持子网格行对齐	无需复杂对齐，流式即可

给设计师的实用建议：

• 使用 Figma 的 自动布局 模拟弹性网格：设置容器为横向自动布局，子项最小宽度和最大宽度分别对应 minmax 的两个值，并勾选“换行”。
• 不必在画板里拉满 24 列辅助线，而是针对每个区域单独建立“局部网格”，用蓝图层标记轨道比例。

---

总结：
现代栅格设计不是选一个数字，而是建立一套弹性空间语言。桌面端用固定+弹性轨道定义大框架，内容区域用 auto-fit 和 minmax 实现连续自适应；手机端继承同一套间距体系，用容器查询和弹性网格让组件在有限宽度下智能排列。这套方案彻底告别了“手机用 4 列、桌面用 24 列”的断点切换模式，更贴合内在网页设计的本质，也是今后大型系统栅格演进的最佳实践。