[!info] related notes

• 所属 MOC: 前端基础 MOC
• 并列概念: flex, box-model
• 面试问法: flex-vs-grid-interview-question

Grid 布局

Grid 是 CSS 中做二维布局的工具，适合同时控制”行”和”列”。

一句话定义

Grid 是二维布局系统，核心是在行和列两个维度上同时组织页面结构。如果你关心的是”页面要按几行几列整体排布”，通常先想到 Grid。

和 Flex 的思维差异

• Flex 先想主轴和子项怎么排
• Grid 先想整个网格怎么分区
• Flex 更擅长一维布局（要么管行，要么管列）
• Grid 更擅长二维布局（同时管行和列）

选择原则：

• 一排按钮、导航、标签 → 优先 Flex
• 整页结构、卡片宫格、复杂区块 → 优先 Grid
• 可以外层 Grid + 内层 Flex 混用

最小例子

.container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: 80px 80px;
  gap: 10px;
}

• display: grid 开启网格布局
• grid-template-columns 定义两列，每列 100px
• grid-template-rows 定义两行，每行 80px
• gap 格子之间间距

核心属性

容器属性

grid-template-columns / grid-template-rows

定义列和行轨道。

/* 三列：固定200px + 两份平分剩余空间 */
grid-template-columns: 200px 1fr 1fr;

/* 三行：60px + 自动 + 40px */
grid-template-rows: 60px auto 40px;

fr 表示”剩余空间的份数”：

/* 把剩余空间分成4份：1:2:1 */
grid-template-columns: 1fr 2fr 1fr;

gap

控制行列间距。

gap: 20px;
row-gap: 10px;
column-gap: 20px;

子元素定位

默认按顺序自动排进格子，也可以手动指定位置：

.item1 {
  grid-column: 1 / 3;  /* 从第1条线跨到第3条线，占两列 */
  grid-row: 1 / 2;    /* 在第1行 */
}

注意：Grid 线从 1 开始，不是 0。

进阶用法

repeat()：少写重复代码

/* 等价于 1fr 1fr 1fr */
grid-template-columns: repeat(3, 1fr);

minmax() + auto-fit：响应式卡片

最实用的响应式写法：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

• 每个项目最小 200px
• 有多余空间就拉伸
• 一行能放几个就放几个
• 屏幕变窄时自动换行

grid-template-areas：用名字布局

可读性很强：

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 60px 1fr 50px;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

header { grid-area: header; }
aside  { grid-area: sidebar; }
main   { grid-area: main; }
footer { grid-area: footer; }

完整示例：页面布局

<div class="layout">
  <header>头部</header>
  <aside>侧边栏</aside>
  <main>主内容</main>
  <footer>底部</footer>
</div>

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 60px 1fr 50px;
  gap: 10px;
  height: 100vh;
}

header { grid-column: 1 / 3; }
aside   { grid-column: 1 / 2; }
main    { grid-column: 2 / 3; }
footer  { grid-column: 1 / 3; }

常见坑

1. 忘了写 display: grid：没开启网格，后面的属性都不会生效
2. 1fr 不是无脑平均：它分的是剩余空间，不是全部宽度
3. 行高可能不够：内容超出定义的行高时，布局可能撑开或溢出
4. Grid 线从 1 开始：不是从 0

实用模板：卡片宫格

直接背下来就能用：

.list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

它最擅长什么

• 页面整体分区
• 仪表盘卡片网格
• 明确的多行多列布局
• 用区域命名表达结构关系

最短记忆方式

Grid 更像”先画网格，再把内容放进去”。

Related notes

• 前端工程化MOC
• 前端基础MOC
• CSS MOC
• ECMAScript MOC