CSS Grid 二维布局详解

CSS Grid 是为二维布局设计的，能同时控制行和列。它让复杂的页面布局变得直观，是现代 CSS 布局的核心。

一、基础网格

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;   /* 三等分列 */
  grid-template-rows: 100px 200px;       /* 两行 */
  gap: 16px;
}

1fr 表示一份剩余空间（fraction），类似 flex-grow。

二、repeat 函数

grid-template-columns: repeat(3, 1fr);       /* 等价 1fr 1fr 1fr */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));  /* 响应式！ */

repeat(auto-fit, minmax(200px, 1fr)) 是响应式卡片布局的神器：自动根据容器宽度决定几列，无需媒体查询。

三、项目跨越

.item-a {
  grid-column: 1 / 3;    /* 跨第 1-2 列 */
  grid-row: 1 / 2;       /* 第 1 行 */
}
.item-b {
  grid-column: span 2;   /* 跨 2 列 */
}

四、命名网格区域

用 ASCII 图般直观地定义布局：

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 200px 1fr;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }

五、对齐控制

.grid {
  justify-items: center;     /* 项目水平对齐 */
  align-items: center;       /* 项目垂直对齐 */
  justify-content: center;   /* 整个网格水平 */
  align-content: center;     /* 整个网格垂直 */
}

六、Flexbox vs Grid 怎么选

• 一维布局（一行或一列）→ Flexbox
• 二维布局（行列同时）→ Grid
• 组件内部布局 → Flex；整体页面布局 → Grid

七、小结

Grid 把二维布局变得声明式、可视化。掌握 Grid + Flexbox，加上响应式技巧，就能驾驭几乎所有现代 Web 布局需求。