网格 | CSS Grid (Grid Layout)

  CSS 中文开发手册

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

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

像表格一样，网格布局使作者能够将元素对齐到列和行中。但是，使用CSS网格的布局要比使用表格要多得多。例如，一个网格容器的子元素可以自己定位，因此它们实际上是重叠的，并且与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网格检查器

规范

Specification	Status	Comment
CSS Grid Layout	Candidate Recommendation	Initial definition.

  CSS 中文开发手册

  本文标题：网格 | CSS Grid (Grid Layout) – CSS 中文开发手册 - Break易站

转载请保留页面地址：https://www.breakyizhan.com/css/32177.html