0Pricing
Frontend Academy · 课时

使用 CSS Grid 进行布局

使用 CSS Grid 定义行和列，精确放置项目，并用极少的代码创建常见页面布局。

使用 CSS Grid 进行布局 是 CoddyKit 上的免费 Frontend Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

什么是 CSS 网格布局

CSS 网格布局是一种二维布局系统——您可以同时控制行和列。它非常适合整体页面结构，以及在定义好的网格中明确放置 element。

定义列：grid-template-columns

grid-template-columns 用于定义列结构。您可以使用固定尺寸（px）、弹性分数（fr）或 auto。repeat(n, size) 会重复轨道定义。

.layout {
  display: grid;
  grid-template-columns: 240px 1fr; /* sidebar + main */
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
}

fr 单位

fr（分数单位）会按比例分配剩余空间。1fr 2fr 会让第二列获得第一列两倍的空间。它是创建流式网格轨道的基础。

.layout {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* left center right */
}

定义行：grid-template-rows

您也可以显式定义行。如果不定义，浏览器会自动创建隐式行。grid-auto-rows: minmax(200px, auto) 可以设置隐式行的尺寸。

.page {
  display: grid;
  grid-template-rows: auto 1fr auto; /* header content footer */
  min-height: 100vh;
}

网格中的 gap

与 Flexbox 一样，gap 会在网格轨道之间添加空间，而不会影响外边缘。row-gap 和 column-gap 可以分别控制两个轴。

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

grid-template-areas

使用字符串为网格区域命名，再通过 grid-area 将 element 分配到这些区域中。这样可以创建易读、直观的布局代码。

.page {
  display: grid;
  grid-template-areas:
    'header header header'
    'sidebar main main'
    'footer footer footer';
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
}
header { grid-area: header; }
sidenav { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }

使用 grid-column 和 grid-row 放置项目

使用 grid-column: start / end 和 grid-row: start / end 精确控制项目所在的位置。使用 -1 可引用最后一条网格线。span N 表示跨越 N 个轨道。

.featured {
  grid-column: 1 / -1;  /* span all columns */
  grid-row: span 2;      /* occupy two rows */
}

auto-fit 与 minmax()——响应式列

最强大的响应式网格单行写法是：repeat(auto-fit, minmax(280px, 1fr))。它会创建尽可能多的列，每列至少宽 280px，并使用 1fr 填充剩余空间。

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

auto-fill 与 auto-fit

auto-fill 即使轨道为空也会创建轨道，从而保持固定网格。auto-fit 会折叠空轨道，让项目扩展并填满整行。对于应当拉伸以填充空间的内容，请使用 auto-fit。

隐式网格与显式网格

您定义的轨道属于显式网格。当添加的项目多于已定义的轨道时，浏览器会创建隐式轨道。您可以使用 grid-auto-rows 和 grid-auto-columns 控制它们的尺寸。

网格布局与弹性盒布局——何时使用各自的布局

网格布局：适用于二维布局、页面结构、图片库和仪表板。弹性盒布局：适用于一维行或堆叠布局、居中，以及在一行中分配项目。两者可以相互配合——使用网格布局构建页面骨架，使用弹性盒布局处理组件内部布局。

快速检查

哪个 CSS 值可以创建宽度至少为 250px 且均分剩余空间的列？

回顾：CSS 网格布局

grid-template-columns 定义列。fr 用于分配空间。repeat() 简化重复定义。gap 添加间距。grid-template-areas 让布局更易读。auto-fit 与 minmax 结合，可以无需媒体查询就创建响应式网格。网格布局是二维页面布局的首选工具。

常见问题解答

「使用 CSS Grid 进行布局」课时是免费的吗？

是的 — 「使用 CSS Grid 进行布局」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「使用 CSS Grid 进行布局」这节课中我会学到什么？

使用 CSS Grid 定义行和列，精确放置项目，并用极少的代码创建常见页面布局。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。

「使用 CSS Grid 进行布局」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 视口元标签
  2. 使用 Flexbox 进行布局
  3. 使用 CSS Grid 进行布局
  4. 媒体查询与移动优先开发
← 返回 Frontend Academy