你如何用 CSS Grid 创建一个布局？

Question

IT Interview Practice · Accepted Answer

**CSS Grid** 是一个二维布局系统 — 它**同时控制行和列**，不像 Flexbox 的单行布局。你在容器上定义一个网格，然后将项目放入其中。

```css
.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr; /* 3 columns: fixed, then two flexible */
  grid-template-rows: auto 1fr auto;     /* 3 rows */
  gap: 1rem;                              /* gutters between cells */
}
```

## fr 单位和 repeat()

```css
grid-template-columns: repeat(3, 1fr);   /* 3 equal columns */
grid-template-columns: 1fr 2fr;          /* 2nd column is twice the 1st */
```

`fr`（"fraction"）分配可用空间 — `1fr 2fr` 按 1:2 比例分割。`repeat(3, 1fr)` 是三个相等轨道的简写。

## 无媒体查询的响应式网格

```css
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
```

这一行代码创建了一个完全响应式的卡片网格：每列至少 `250px`；浏览器在每行中**尽可能多地放置**列，并将其余部分换行 — 自动从桌面上的 4 列变为移动设备上的 1 列。`auto-fit` + `minmax` 是 Grid 最受欢迎的模式之一。

## 将项目跨越多个单元格放置

```css
.hero {
  grid-column: 1 / 3;  /* span from column line 1 to 3 (two columns) */
  grid-row: 1 / 2;
}
.featured { grid-column: span 2; } /* span 2 columns from its position */
```

项目可以跨越多行/列，实现杂志风格的布局，这在 Flexbox 中很困难。

## Grid vs Flexbox

- **Grid** — 2D 布局（行*和*列）：页面布局、卡片网格、仪表盘。
- **Flexbox** — 1D 布局（单行或单列）：导航栏、按钮组、居中。

它们组合得很好 — 一个网格单元本身可以是一个 flex 容器。

## 为什么这很重要

Grid 是最强大的 CSS 布局工具 — 它能简洁地处理全页面布局和响应式卡片网格，通常可以替代嵌套 div 的小技巧。

仅 `auto-fit`/`minmax` 响应式模式就可以消除许多媒体查询的需要。

fr 单位和 repeat()

无媒体查询的响应式网格

将项目跨越多个单元格放置

Grid vs Flexbox

为什么这很重要

相关问题