Grid：列、行、区域

用 CSS Grid 的列、行和命名区域，构建画廊和完整的页面布局。

9 分钟 · 3 题

Flexbox 沿一条轴对齐；Grid 同时掌控两条轴。一旦你的设计稿看起来像一张表格——照片画廊、仪表盘、带页头/侧边栏/页脚的整页——Grid 就是合适的工具。容器用列和行定义结构，子元素要么自动排布，要么精确地落在你选定的位置。

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

fr（fraction，分数）单位会分配可用空间：1fr 2fr 会创建两列，其中第二列的宽度是第一列的两倍。与百分比不同，fr 会把 gap 考虑在内，无需你做任何计算。要突出某个元素，可以用 grid-column 和 grid-row 让它跨越多条轨道。

.featured {
  grid-column: span 2;
  grid-row: span 2;
}

对于整页布局，grid-template-areas 让你可以直接在 CSS 里画出设计稿。每个字符串代表网格的一行，每个词代表一个命名区域。然后子元素用 grid-area 把自己放进去。结果读起来就像建筑师的图纸：这是页面布局最易读的方法。

.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  min-height: 100vh;
}

.site-header { grid-area: header; }
.site-nav { grid-area: sidebar; }
.site-main { grid-area: main; }
.site-footer { grid-area: footer; }

知识检测

确认你已牢记本课的重点内容。

1. 在 grid-template-columns: 1fr 2fr 中，fr 单位代表什么？
   • 容器可用空间的一份
   • 屏幕宽度的一个百分比
   • 以像素表示的固定尺寸
2. 哪条声明能创建三个等宽的列？
   • grid-template-columns: 3
   • grid-template-columns: repeat(3, 1fr)
   • grid-columns: 1fr 3
3. grid-template-areas 有什么用？
   • 命名网格区域，子元素通过 grid-area 放入其中
   • 定义网格各列的尺寸
   • 在单元格之间创建动画