CSS 网格布局 · CSS Grid Layout
英文：CSS Grid Layout
页面布局难度：入门 ★
🗣️一句话大白话
按明确的行和列组织页面，适合处理二维关系的复杂布局。按照明确的行和列组织页面，适合处理二维关系。它可以让不同模块占据不同列宽，构建规则或非对称的复杂页面。
🎬真实场景
复杂首页、杂志排版、Dashboard、非对称作品集、响应式模块
📮你可以这样说
「使用 CSS Grid 构建 Punk 的作品页面， 桌面端采用 12 列网格，主项目占 8 列，项目说明占 4 列，其余项目每张占 4 列； 900px 以下改为 6 列，640px 以下改为单列； 使用 grid-template-columns 和 gap，不要用绝对定位硬拼布局。」
通过 AI绘图 工作台生成（模型 API 额度由此消耗）；未配置模型密钥时会提示失败原因。
⚠️边界与常见误解
- ▸误解：Grid 和 Flexbox 可以随便替换。实际 Grid 适合二维（行列同时控制），Flexbox 适合一维（单行或单列）
🚫什么时候别用
- ✗只需要一行/一列的简单排列（用 Flexbox 更简单）
🧩常见变体
12 列网格非对称跨列网格
🕸️知识关系图
这个词条与相关术语、AI绘图 知识的连接关系