CSS 网格布局

CSS 网格布局模块擅长于将页面划分为主要区域，或定义由 HTML 原语构建的控件各部分之间在大小、位置和层叠方面的关系。

与表格类似，网格布局使作者能够将元素对齐到列和行中。然而，CSS 网格比表格可以实现或更容易实现更多布局。例如，网格容器的子元素可以定位自身，使其像 CSS 定位元素一样实际重叠和分层。

网格布局实战

该示例展示了一个三列轨道网格，新行以最小 100 像素、最大自动的方式创建。项目已使用基于行的放置方式放置到网格中。

<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>

* {
  box-sizing: border-box;
}
.wrapper {
  max-width: 940px;
  margin: 0 auto;
}
.wrapper > div {
  border: 2px solid rgb(233 171 88);
  border-radius: 5px;
  background-color: rgb(233 171 88 / 50%);
  padding: 1em;
  color: #d9480f;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-column: 1;
  grid-row: 2 / 5;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}

此示例动画使用 display、grid-template-columns、grid-template-rows 和 gap 来创建网格，并使用 grid-column 和 grid-row 在网格中定位项目。要查看和编辑所使用的 HTML 和 CSS，请单击示例右上角的“播放”。

参考

属性

函数

数据类型和值

<flex> (fr 单位)

术语和词汇表定义

指南

网格布局的基本概念: CSS 网格布局模块中提供的各种功能概述。
网格布局与其他布局方法的关系: 网格布局如何与其他 CSS 功能（包括 flexbox、绝对定位元素和 display: contents）协同工作。
使用基于线的定位的网格布局: 网格线以及如何根据这些线定位项目，包括 grid-area 属性、负行号、跨多个单元格以及创建网格间距。
网格模板区域: 使用命名模板区域放置网格项目。
使用命名网格线进行网格布局: 结合名称和轨道大小；通过定义命名网格线和模板区域来放置网格项目。
网格布局中的自动放置: 网格如何定位未声明任何放置属性的项目。
在 CSS 网格布局中对齐项目: 沿网格布局的两个轴对网格项目进行对齐、两端对齐和居中。
网格、逻辑值和书写模式: 探讨 CSS 网格布局、盒模型对齐和书写模式之间以及 CSS 逻辑和物理属性和值之间的交互。
网格布局和无障碍性: 探讨 CSS 网格布局如何既能帮助也能损害可访问性。
使用网格实现常见布局: 一些不同的布局展示了在使用 CSS 网格布局进行设计时可以使用的不同技术，包括使用 grid-template-areas、12 列灵活网格系统和使用自动放置的产品列表。
子网格: 子网格的作用，以及子网格解决的用例和设计模式。
砌体布局: 详细说明什么是砌体布局及其用途。
CSS 网格布局中的盒模型对齐: 盒模型对齐在网格布局上下文中的工作原理。

规范

规范
CSS 网格布局模块 Level 2

另见

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者于 2025 年 7 月 14 日修改。

在 GitHub 上查看此页面 • 报告此内容的问题