网格布局 | CSS Grid Layout

CSS Grid Layout

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

• grid-template-rows

• grid-template-areas

• grid-template

• grid-auto-columns

• grid-auto-rows

• grid-auto-flow

• grid

• grid-row-start

• grid-column-start

• grid-row-end

• grid-column-end

• grid-row

• grid-column

• grid-area

• grid-row-gap

• grid-column-gap

• grid-gap

CSS功能

• repeat()

• minmax()

• fit-content()

术语

• 格网

• 网格线

• 网格轨道

• 网格单元

• 网格面积

• 排水沟

• 网格轴

• 栅格行

• 网格柱

指南

• 网格布局的基本概念

• 网格布局与其他布局方法的关系

• 基于行布局的布局

• 网格模板区

• 使用命名网格线的布局

• css网格布局中的自动布局

• CSS网格布局中的框对齐

• CSS网格、逻辑值与写入方式

• CSS网格布局和可访问性

• CSS网格与渐进增强

• 使用CSS网格实现公共布局

外部资源

• 珍·西蒙斯的例子

• 网格逐个示例---使用示例和视频教程的集合。

• CoDrops网格参考

• Firefox DevTools CSS网格检查器

规范