正在加载...

CSS Grid

Flexbox 把元素排在单一方向上。CSS Grid 打开下一章：行与列一起管。打开 display: grid，画出轨道，加上 gap，再在后续的 Grid Container、Items、Areas 与 Responsive 课里深入。

Grid 起步工具箱

📊 Grid 一览

概念	日常作用
Grid 容器	带 `display: grid`（或 `inline-grid`）的父元素
Grid 项目	落在网格里的直接子元素
轨道（tracks）	构成格子的行与列
单元格 / 区域	项目落脚的位置（区域在后续课）
`gap`	轨道之间的沟槽，不必靠 margin 小技巧
`fr` 单位	把剩余空间分给各轨道（预习）

把 Grid 想成页面的方格纸：先画列与行，再把内容放进单元格。工具栏和单轴小簇仍适合 Flexbox。

display: grid — 打开格子

在父元素上设 display: grid。子元素会自动变成网格项目——基础模型不需要额外 class。

基础 grid 容器

css

.board {
display: grid;
}

先定列 — 简单模板

grid-template-columns 定义纵向轨道。三列等宽是卡片或瓷砖的从容起步草图。

三列等宽

css

.board {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}

gap — 诚实的间距

用 gap（或 row-gap / column-gap），轨道回流时间距仍一致。优先用 gap，别在每个子元素上撒 margin。

带 gap 的 Grid

css

.board {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}

一小块卡片矩阵

与画廊草图同一思路——等宽轨道加 gap——但你现在说的是 Grid，而不只是 flex-wrap。

卡片矩阵

css

.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}

.cards__item {
min-height: 8rem;
}

fr — 分享剩余空间

fr 单位在轨道之间分配剩余空间。有空间时，2fr 1fr 让第一列是第二列的两倍宽。

不等分的 fr 列

css

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

从容的 Grid 习惯

用 Grid 做二维页面骨架与矩阵。用 Flexbox 做一维行。从 display: grid、简单的 grid-template-columns 和 gap 起步。深层自动放置、命名区域与响应式 Grid 轨道留给后续课。

命名起步骨架

css

.page {
display: grid;
grid-template-columns: 1fr 16rem;
gap: 1.5rem;
}

.page__main,
.page__rail {
min-width: 0;
}

自己动手试

做一个带 display: grid 的容器。
设置 grid-template-columns: repeat(3, 1fr)。
在轨道之间加 gap: 1rem。
用 2fr 1fr 试主栏 + 侧栏骨架。
写一句话：你何时仍会选 Flexbox？

常见错误

没有布局需要却给每个元素都加 display: grid
指望单靠 Flexbox 换行就能代替真正的二维 Grid
跳过 gap，永远和子元素 margin 较劲
基础轨道还没顺手就跳进命名区域
明明更适合 Grid，却用 float 搭整页骨架

小结

CSS Grid 是二维的：行与列一起
display: grid 让子元素成为网格项目
grid-template-columns（以及之后的行）定义轨道
gap 与 fr 让沟槽与剩余空间从容
更深入的容器、项目、区域与响应式 Grid 课在后面

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓

问题

🎯

70%

及格要求

♾️

∞

时间

🔄

∞

尝试次数

📝 说明

仔细阅读每个问题
为每个问题选择最佳答案
您可以随时重新参加测验
您的进度将显示在顶部

语言