Glittering's blog

Appearance

CSS Grid 布局语法完整总结，包含结构化讲解 + 常用示例

🧩 一、什么是 Grid 布局？ ​

Grid（网格布局） 是 CSS3 提供的一种强大的二维布局系统， 能同时在 行（row） 和 列（column） 两个方向上精确控制元素的位置。

📌 对比：

  • Flex → 一维布局（只能控制行或列）
  • Grid → 二维布局（行 + 列）

📐 二、基本结构 ​

::: demo [vanilla]

html
<html>
  <div class="grid-container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
  </div>
</html>
<style>
.grid-container {
  border: 1px solid red;
  display: grid; /* 开启网格布局 */
  grid-template-columns: 100px 200px auto;
  grid-template-rows: 80px 80px;
  gap: 10px; /* 行列间距 */
}
.item{
  border: 1px solid black;
}
</style>

:::

🧱 三、核心语法 ​

1️⃣ display: grid | inline-grid ​

开启网格布局。 inline-grid 表示容器是行内元素。

2️⃣ grid-template-columns / grid-template-rows ​

定义列和行的尺寸。

css
grid-template-columns: 100px 200px auto;
grid-template-rows: 100px 100px;

✅ 常用单位：

单位说明
px / % / em固定或相对尺寸
fr“比例分配”单位（最常用）
auto根据内容自动调整
minmax(min, max)设置最小、最大范围

示例：

css
grid-template-columns: 1fr 2fr 1fr;

表示 3 列，宽度比例 1:2:1。

3️⃣ gap / row-gap / column-gap ​

定义行列之间的间距。

css
gap: 10px; /* 行列间距 */
row-gap: 20px;
column-gap: 15px;

4️⃣ grid-template-areas ​

定义区域布局（语义化强，适合复杂页面结构）。

css
.grid-container {
  display: grid;
  grid-template-columns: 100px 1fr 100px;
  grid-template-rows: 60px 1fr 60px;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

5️⃣ grid-auto-rows / grid-auto-columns ​

当内容超出定义的模板行/列时，用于自动生成额外的行或列的大小。

css
grid-auto-rows: 100px;

6️⃣ grid-auto-flow ​

控制自动放置算法的方向。

css
grid-auto-flow: row | column | row dense | column dense;
  • row（默认）：从左到右、从上到下。
  • column：从上到下、从左到右。
  • dense：填补空隙（可能打乱顺序）。

📦 四、子项（Grid Item）定位语法 ​

1️⃣ 基于行列编号定位 ​

css
.item1 {
  grid-column-start: 1;
  grid-column-end: 3; /* 跨两列 */
  grid-row-start: 1;
  grid-row-end: 2;
}

简写形式：

css
.item1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

2️⃣ 跨行 / 跨列 ​

css
.item {
  grid-column: span 2; /* 跨两列 */
  grid-row: span 3;    /* 跨三行 */
}

3️⃣ 自动对齐 ​

属性作用范围值
justify-items沿水平方向对齐每个单元格的内容start / center / end / stretch
align-items沿垂直方向对齐每个单元格的内容同上
place-items简写align-items justify-items
css
.grid-container {
  place-items: center; /* 水平 + 垂直都居中 */
}

4️⃣ 对齐整个网格内容 ​

属性作用范围值
justify-content网格整体在容器内的水平对齐start / center / end / space-between / space-around
align-content网格整体在容器内的垂直对齐同上
place-content简写align-content justify-content

5️⃣ 单个子项对齐（覆盖全局） ​

css
.item1 {
  justify-self: end;
  align-self: center;
}

或简写：

css
.item1 {
  place-self: center end;
}

🧮 五、repeat() 函数 ​

简化重复列定义：

css
grid-template-columns: repeat(3, 1fr);

等价于：

css
grid-template-columns: 1fr 1fr 1fr;

也支持混合写法：

css
grid-template-columns: 100px repeat(2, 1fr) 200px;

🧠 六、auto-fit / auto-fill 响应式布局 ​

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

✅ 区别：

  • auto-fill：尽可能多地填充列（空格仍占位）
  • auto-fit：自动折叠空列（自适应填满）

🧭 七、命名线（命名行列） ​

css
grid-template-columns: [left] 1fr [middle] 2fr [right];
.item {
  grid-column: left / right; /* 使用命名行定位 */
}

🧰 八、实战案例：常见布局 ​

✅ 三列布局（中间自适应） ​

css
.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
}

✅ 瀑布流布局（dense 填补） ​

css
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-auto-rows: 150px;
  grid-auto-flow: dense;
}

⚡ 九、Grid 与 Flex 对比总结 ​

特性FlexGrid
布局维度一维（行/列）二维（行+列）
对齐主轴/交叉轴行/列两维度
内容对齐灵活精确
响应式布局需要嵌套一步到位
使用场景局部、组件内布局页面整体布局

🧭 十、结构化总结（思维导图） ​

CSS Grid 布局
 ├── display: grid / inline-grid
 ├── 行列定义
 │   ├── grid-template-columns / rows
 │   ├── repeat() / minmax()
 │   ├── auto-fit / auto-fill
 │   └── gap / row-gap / column-gap
 ├── 自动布局
 │   ├── grid-auto-flow
 │   ├── grid-auto-rows / columns
 ├── 区域布局
 │   ├── grid-template-areas
 │   ├── grid-area（子项）
 ├── 对齐控制
 │   ├── justify-items / align-items / place-items
 │   ├── justify-content / align-content / place-content
 │   └── justify-self / align-self / place-self
 ├── 子项定位
 │   ├── grid-row / grid-column
 │   └── span / 命名线
 ├── 函数
 │   ├── repeat()
 │   ├── minmax()
 │   ├── fit-content()
 └── 实战应用
     ├── 三列布局
     ├── 瀑布流
     ├── 自适应卡片网格
     └── Dashboard布局

Copyright © 2026