CSS Grid 实战：复杂布局变得简单

CSS Grid 已经得到所有主流浏览器支持，现在是使用它的最佳时机。

基础概念

定义网格

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
}

网格区域命名

.container {
  display: grid;
  grid-template-areas:
    'header header header'
    'sidebar main aside'
    'footer footer footer';
}

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

常见布局模式

圣杯布局

.layout {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 60px 1fr 60px;
  min-height: 100vh;
}

.header { grid-column: 1 / -1; }
.footer { grid-column: 1 / -1; }
.main { grid-row: 2; }

响应式网格

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

自适应表单

.form {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px 20px;
  align-items: center;
}

label {
  grid-column: 1;
}

input {
  grid-column: 2;
}

button {
  grid-column: 3;
}

高级技巧

子网格（Firefox 支持）

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

.child {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 3;
}

密集填充

.masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
  grid-auto-flow: dense;
}

.item:nth-child(2n) {
  grid-row: span 2;
}

.item:nth-child(3n) {
  grid-column: span 2;
}

对齐控制

.container {
  display: grid;
  place-items: center; /* 水平和垂直居中 */
  place-content: space-between; /* 内容分布 */
}

与 Flexbox 配合

/* Grid 用于页面级布局 */
.page {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* Flexbox 用于组件内部 */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

调试技巧

Chrome DevTools 提供了 Grid 可视化工具：

• 查看网格线

• 显示区域名称

• 调整 gap 大小