首页 › CSS › 布局 › Grid 网格布局

CSS Grid 是二维布局模型——同时控制行和列。

基本概念

容器属性

.grid {
  display: grid;

  /* 列模板 */
  grid-template-columns: 200px 1fr 1fr;   /* 三列 */
  grid-template-columns: repeat(3, 1fr);   /* 三列等分 */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 响应式列数 */

  /* 行模板 */
  grid-template-rows: 100px auto 80px;     /* 首行 100px，中间自适应，尾行 80px */

  /* 间距 */
  gap: 16px;             /* 行+列间距 */
  row-gap: 16px;         /* 仅行间距 */
  column-gap: 16px;      /* 仅列间距 */

  /* 对齐 */
  justify-items: stretch;  /* 单元格内水平对齐 */
  align-items: stretch;    /* 单元格内垂直对齐 */
  place-items: center;     /* 简写：同时水平+垂直居中 */

  justify-content: start;  /* 整个网格容器水平对齐 */
  align-content: start;    /* 整个网格容器垂直对齐 */
}

项目属性

.item {
  /* 按线条编号 */
  grid-column: 1 / 3;      /* 从第 1 列线到第 3 列线（占 2 列） */
  grid-row: 1 / 2;         /* 从第 1 行线到第 2 行线 */

  /* 简写 */
  grid-column: 1 / span 2; /* 从第 1 列开始，占 2 列 */
  grid-row: 1 / span 1;

  /* 区域命名 */
  grid-area: header;        /* 对应 grid-template-areas */
}

区域命名

.grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 80px 1fr 60px;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 0;
}

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

响应式列数

/* 自动填充，每列最小 250px，最大 1fr */
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

auto-fill：尽可能填满容器，可能产生空列；auto-fit：收缩空列，子项放大。

Grid vs Flexbox

场景	推荐
一维布局（行内弹性分配）	Flexbox
二维布局（行列同时控制）	Grid
等分列	都可以
页面整体骨架	Grid
组件内部排列	Flexbox

小结

属性	作用
grid-template-columns	列宽定义
grid-template-rows	行高定义
grid-template-areas	区域命名
gap	间距
repeat() / minmax()	重复列 / 最小最大
grid-column / grid-row	项目跨列/跨行

上一节：Flexbox 弹性布局 下一节：Grid 进阶与 subgrid

贡献者: 布欧-Lewyon