网格布局 | CSS Grid Layout (Grid Layout) - CSS 中文开发手册

CSS网格布局擅长将页面划分区域，或根据HTML原语构建的控件的各个部分之间的大小、位置和层定义关系。

与表一样，网格布局使作者能够将元素对齐为列和行。然而，与表相比，CSS网格的布局可能更多，或者更容易。例如，网格容器%27s子元素可以将自己定位为实际重叠和层，类似于CSS定位的元素。

基本实例

下面的示例显示了一个三列跟踪网格，其中新建的行至少为100像素，最大为AUTO。项目已被放置到网格上，使用基于行的布局。

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

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-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;
}

参照系

CSS属性

grid-template-columnsgrid-template-rowsgrid-template-areasgrid-templategrid-auto-columnsgrid-auto-rowsgrid-auto-flowgridgrid-row-startgrid-column-startgrid-row-endgrid-column-endgrid-rowgrid-columngrid-areagrid-row-gapgrid-column-gapgrid-gap

CSS功能

repeat()minmax()fit-content()

术语

格网网格线网格轨道网格单元网格面积排水沟网格轴栅格行网格柱

指南

网格布局的基本概念网格布局与其他布局方法的关系基于行布局的布局网格模板区使用命名网格线的布局css网格布局中的自动布局CSS网格布局中的框对齐CSS网格、逻辑值与写入方式CSS网格布局和可访问性CSS网格与渐进增强使用CSS网格实现公共布局

外部资源

珍·西蒙斯的例子网格逐个示例---使用示例和视频教程的集合。CoDrops网格参考Firefox DevTools CSS网格检查器

规范