CSS Subgrid 深度实战：告别嵌套布局的对齐噩梦

1
<div class="card-list">
2
  <article class="card">
3
    <h3 class="card-title">Vite 6.0 发布</h3>
4
    <p class="card-desc">新一代构建工具的重大更新，Environment API 正式稳定……</p>
5
    <a class="card-action" href="#">阅读更多</a>
6
  </article>
7
  <article class="card">
8
    <h3 class="card-title">为什么我从 Webpack 迁移到 Rspack</h3>
9
    <p class="card-desc">构建时间从 47 秒降到 3 秒的真实经历。</p>
10
    <a class="card-action" href="#">阅读更多</a>
11
  </article>
12
  <article class="card">
13
    <h3 class="card-title">CSS 终于有原生嵌套了</h3>
14
    <p class="card-desc">告别预处理器的那一天。</p>
15
    <a class="card-action" href="#">阅读更多</a>
16
  </article>
17
</div>

1
.card-list {
2
  display: grid;
3
  grid-template-columns: repeat(3, 1fr);
4
  /* 这里不定义 rows —— 用隐式网格 + subgrid 的方式 */
5
  gap: 24px;
6
}
7

8
.card {
9
  display: grid;
10
  grid-row: span 3;
11
  grid-template-rows: subgrid;
12
  gap: 12px;
13
  padding: 20px;
14
  border: 1px solid #e2e8f0;
15
  border-radius: 12px;
16
}
17

18
.card-title {
19
  font-size: 1.25rem;
20
  font-weight: 700;
21
  margin: 0;
22
}
23

24
.card-desc {
25
  margin: 0;
26
  color: #64748b;
27
  line-height: 1.6;
28
}
29

30
.card-action {
31
  align-self: end;
32
  color: #3b82f6;
33
  font-weight: 600;
34
  text-decoration: none;
35
}

1
<form class="form-grid">
2
  <div class="form-row">
3
    <label for="name">姓名</label>
4
    <input id="name" type="text" />
5
    <span class="hint">请输入真实姓名</span>
6
  </div>
7
  <div class="form-row">
8
    <label for="email">电子邮箱</label>
9
    <input id="email" type="email" />
10
    <span class="hint">用于接收验证码</span>
11
  </div>
12
  <div class="form-row">
13
    <label for="bio">个人简介（选填）</label>
14
    <textarea id="bio" rows="3"></textarea>
15
    <span class="hint">不超过 200 字</span>
16
  </div>
17
</form>

1
.form-grid {
2
  display: grid;
3
  grid-template-columns: 120px 1fr 180px; /* 标签 / 输入框 / 提示 */
4
  gap: 16px 12px;
5
  align-items: start;
6
}
7

8
.form-row {
9
  display: grid;
10
  grid-column: 1 / -1;              /* 占满父级所有列 */
11
  grid-template-columns: subgrid;    /* 继承 3 列定义 */
12
  align-items: center;
13
}
14

15
label {
16
  font-weight: 600;
17
  color: #1e293b;
18
}
19

20
.hint {
21
  font-size: 0.85rem;
22
  color: #94a3b8;
23
}

1
.dashboard {
2
  display: grid;
3
  grid-template-columns: 240px 1fr 1fr 300px;
4
  grid-template-rows: 64px 1fr auto;
5
  gap: 16px;
6
  height: 100vh;
7
}
8

9
/* 侧边栏占据所有行 */
10
.sidebar {
11
  grid-row: 1 / -1;
12
}
13

14
/* 主内容区域继承父级列 */
15
.main-content {
16
  display: grid;
17
  grid-column: 2 / 4;          /* 占据第 2-3 列 */
18
  grid-template-columns: subgrid;  /* 继承这 2 列 */
19
  gap: 16px;
20
}