LAYOUT
12 栏栅格系统12-Column Grid System
把页面宽度切成 12 等份，任何元素都跨整数份排列。所有精致布局背后的隐形骨架。
效果预览
5 栏 · 主内容
适合用在哪
整站布局的基础设施；先定栅格再排版，间距才不会乱。
容易踩的坑
- 栅格 gap 与组件内间距不在同一刻度上，24px 栅格配 18px 卡片内边距，版面显得松垮。
- 用 1fr 但子元素含长单词或宽表格，列被撑开导致整行错位，应改用 minmax(0,1fr)。
- 只在桌面端设计 12 栏，8 栏断点下的 span 组合未定义，平板布局一团乱。
设计提示词 · Prompt
12 栏栅格系统（12-Column Grid）：display:grid; grid-template-columns:repeat(12,1fr); gap:24px，容器最大宽度 1200-1280px 居中，两侧留 24-40px 安全边距。元素用 grid-column:span N 占位（6+6、5+7、4+4+4、8+4 是最常用组合）。响应式断点：≥1024px 用满 12 栏、768-1023px 折成 8 栏、<768px 全部 span 12。所有版式决策先在栅格上想清楚，再动手写样式。
12-Column Grid: display:grid; grid-template-columns:repeat(12,1fr); gap:24px, container max width 1200-1280px centered, with 24-40px safe margins on both sides. Elements take space with grid-column:span N (6+6, 5+7, 4+4+4, and 8+4 are the most common combinations). Responsive breakpoints: ≥1024px uses all 12 columns, 768-1023px folds into 8 columns, <768px everything spans 12. Think every layout decision through on the grid first, then start writing styles.
常见搭配
同一页面里经常和「12 栏栅格系统」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-grid12"> <div class="d-grid12__cols"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div> <div class="d-grid12__a">5 栏 · 主内容</div> <div class="d-grid12__b"></div> <div class="d-grid12__c"></div> <div class="d-grid12__d"></div> </div>