CSS 网格布局

**CSS 网格布局** 模块擅长将页面划分为主要区域，或定义用 HTML 原语构建的控件各部分之间的尺寸、位置和层级关系。

与表格类似，网格布局允许作者将元素对齐到列和行中。但是，与表格相比，CSS 网格布局可以实现更多布局，或者更轻松地实现更多布局。例如，网格容器的子元素可以定位自身，使它们实际上重叠和分层，类似于 CSS 定位元素。

基本示例

下面的示例显示了一个三列轨道网格，新行以至少 100 像素和最多自动创建。项目已使用基于行的放置放置到网格上。

HTML

html
<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>

CSS

css
.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;
}

参考

属性

Functions

Data types

指南

规范

Specification
CSS Grid Layout Module Level 2

另请参见