概述

• CSS 网格布局擅长于将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系
• 像表格一样，网格布局让我们能够按行或列来对齐元素。
• 然而在布局上，网格比表格更可能做到或更简单。

网格容器

• 在元素上设置 display：grid 或 display：inline-grid 即可设置为网格容器。
• 这个元素的所有直系子元素将成为网格元素。

网格轨道

• 通过 grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列
• 这些属性定义了网格的轨道。一个网格轨道就是网格中任意两条线之间的空间。

fr 单位

• 轨道可以使用任何长度单位进行定义。
• 网格还引入了一个另外的长度单位来帮助我们创建灵活的网格轨道。
• 新的fr单位代表网格容器中可用空间的一等份。

grid-template-columns: 1fr 2fr;

repeat()

• 可以使用 repeat() 来标记重复部分或整个轨道列表
• 如: grid-template-columns: 20px repeat(2, 1fr 2fr) 等价于 grid-template-columns: 20px 1fr 1fr 2fr 2fr;

minmax()

• 当我们想给网格一个最小的尺寸，确保他们能扩大到容纳他里面添加的内容时。
• 我们可以使用 minmax(), 如: grid-auto-rows: minmax(100px, auto)

网格线

• 我们在定义网格时，我们定义的是网格轨道，而不是网格线。
• Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素。
• 在浏览器的开发者工具(图示为谷歌) -> 审查元素 -> 点击元素后面的 grid, 就会帮我们显示标线
• 在这个例子中(3 * 2 网格)，拥有4条纵向的网格线和3条横向的网格线

跨轨道放置网格元素

.box1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

• 第一个元素从列线 1 开始，延伸至列线 3, 这样他就得到了上图
• 同样 grid-row-start 和 grid-row-end 用法也是类似的

网格间距

• 在两个网格单元之间的 横向间距 或 纵向间距
• 我们在讲弹性布局的时候有说到, 用法是一样的, 可以参考下面的文档
  • 横向间距: column-gap 元素列之间的间隔
  • 纵向间距: column-gap 元素行之间的间隔

gap: 20px;

小结

• 设置 display：grid 或 display：inline-grid 定义网格容器
• 通过 grid-template-columns 和 grid-template-rows 属性设置网格轨道
• fr 单位、repeat() 和 minmax() 使用
• 什么是网格线？实现跨轨道放置网格元素
• 网格间距（gap）

参考文档

developer.mozilla.org/zh-CN/docs/… developer.mozilla.org/zh-CN/docs/…