CSS Grid 布局

CSS Grid 布局（网格布局）是 CSS 中最强大的二维布局系统。与 Flexbox（一维布局）不同，Grid 可以同时处理行和列，使得创建复杂的、响应式的网页布局变得前所未有的简单。

Grid 布局非常适合用于整个页面的宏观布局，例如划分页眉、页脚、侧边栏和主内容区域。

Grid 的核心概念

与 Flexbox 类似，Grid 布局也包含一个网格容器 (Grid Container) 和一些网格项目 (Grid Items)。

• 网格容器: 通过在元素上设置 display: grid; 或 display: inline-grid; 来创建。
• 网格项目: 网格容器的所有直接子元素自动成为网格项目。

当你定义了一个网格容器后，你可以想象一个由网格线 (Grid Lines) 组成的二维网格覆盖在容器上。这些线划分出了网格轨道 (Grid Tracks)（即行和列）和网格单元格 (Grid Cells)。

网格容器属性 (Properties for the Parent)

display

定义一个网格容器。

• grid: 创建一个块级的网格容器。
• inline-grid: 创建一个内联的网格容器。

grid-template-columns 和 grid-template-rows

这两个属性是 Grid 布局的核心。它们用于定义网格的列和行。

.container {
  display: grid;
  /* 创建三列，宽度分别为 100px, auto, 200px */
  grid-template-columns: 100px auto 200px;
  /* 创建两行，高度都为 150px */
  grid-template-rows: 150px 150px;
}

fr 单位: fr 单位代表网格容器中可用空间的一等份。它非常适合创建弹性布局。

/* 创建三列，第一列 100px，后两列平分剩余空间 */
grid-template-columns: 100px 1fr 1fr;

repeat() 函数: 用于简化重复的轨道定义。

/* 创建 12 个等宽的列 */
grid-template-columns: repeat(12, 1fr);

gap (间隙)

gap 属性用于设置网格线的大小，即网格项目之间的间隙。

• row-gap: 设置行间隙。
• column-gap: 设置列间隙。
• gap: 简写属性，gap: [row-gap] [column-gap];

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 10px; /* 行间隙20px，列间隙10px */
}

justify-items 和 align-items

定义网格项目在其所在的单元格内的对齐方式。

• justify-items: 水平对齐 (start, end, center, stretch)。
• align-items: 垂直对齐 (start, end, center, stretch)。
• place-items: 简写属性，place-items: [align-items] [justify-items];

justify-content 和 align-content

定义整个网格在其容器内的对齐方式（当网格的总大小小于其容器时）。

• justify-content: 水平对齐。
• align-content: 垂直对齐。

网格项目属性 (Properties for the Children)

这些属性用于指定单个网格项目如何放置在网格中。

grid-column-start, grid-column-end, grid-row-start, grid-row-end

这些属性通过指定网格线来确定一个项目的位置和跨度。

.item-a {
  grid-column-start: 1; /* 从第 1 条垂直网格线开始 */
  grid-column-end: 3;   /* 到第 3 条垂直网格线结束 (跨越 2 列) */
  grid-row-start: 2;    /* 从第 2 条水平网格线开始 */
  grid-row-end: 4;      /* 到第 4 条水平网格线结束 (跨越 2 行) */
}

span 关键字: 可以用来指定跨越的轨道数量。

.item-b {
  grid-column-start: 2;
  grid-column-end: span 3; /* 从第 2 条线开始，跨越 3 列 */
}

grid-column 和 grid-row (简写属性)

这是上面四个属性的简写。

grid-column: [start-line] / [end-line];grid-row: [start-line] / [end-line];

.item-a {
  grid-column: 1 / 3;
  grid-row: 2 / span 2;
}

grid-area

grid-area 可以作为 grid-row-start / grid-column-start / grid-row-end / grid-column-end 的简写。它也可以用于命名网格区域，与 grid-template-areas 配合使用，创建语义化的布局。

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
}

Grid 布局是一个非常深入和强大的系统。掌握它需要时间和实践，但它将彻底改变你构建网页布局的方式。