[!info] related notes

• 所属 MOC: CSS MOC
• 相关概念: css-flexbox, CSS 居中布局

CSS Grid

定义

CSS Grid 是一种二维布局系统，可以同时控制行和列。它让复杂的页面布局可以通过声明式的方式实现，而不需要大量的嵌套容器。

机制

容器设置 display: grid 后，可以通过 grid-template-columns 和 grid-template-rows 定义网格轨道，子元素按顺序填充到网格单元中，也可以通过命名区域或行列线手动放置。

容器属性

.grid {
  display: grid;

  /* 定义列 */
  grid-template-columns: 200px 1fr 2fr;
  grid-template-columns: repeat(3, 1fr);
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

  /* 定义行 */
  grid-template-rows: auto 1fr auto;

  /* 间距 */
  gap: 16px;
  row-gap: 16px;
  column-gap: 24px;

  /* 对齐 */
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
  justify-content: start | end | center | space-between;
  align-content: start | end | center | space-between;
}

grid-template-areas

通过命名区域来定义布局，直观且易维护。

.layout {
  display: grid;
  grid-template-areas:
    "header  header  header"
    "sidebar main    aside"
    "footer  footer  footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: 8px;
}

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

用 . 表示空白单元格：

grid-template-areas:
  "header header"
  "main   ."
  "footer footer";

项目属性

.item {
  /* 指定位置：起始线 / 结束线 */
  grid-column: 1 / 3;      /* 从第 1 列线到第 3 列线（跨 2 列） */
  grid-row: 1 / 2;

  /* 简写跨列 */
  grid-column: span 2;     /* 跨 2 列 */

  /* 命名区域 */
  grid-area: header;

  /* 单独对齐 */
  justify-self: end;
  align-self: center;
}

auto-fill vs auto-fit

/* auto-fill：尽可能多地创建列，即使有空列也保留空间 */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

/* auto-fit：尽可能多地创建列，空列会被折叠（不占空间） */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

• auto-fill：有空列也占位，适合需要保持网格结构的场景
• auto-fit：空列折叠，内容会自动拉伸填满空间，更适合响应式

minmax() 和 fr 单位

/* fr 单位：按比例分配剩余空间 */
grid-template-columns: 1fr 2fr 1fr;

/* minmax()：定义最小和最大尺寸 */
grid-template-columns: repeat(3, minmax(200px, 1fr));

/* fit-content()：限制最大宽度 */
grid-template-columns: fit-content(300px) 1fr;

常见布局模式

经典的圣杯布局

.holy-grail {
  display: grid;
  grid-template: auto 1fr auto / 200px 1fr 200px;
  min-height: 100vh;
}
.holy-grail header { grid-column: 1 / -1; }
.holy-grail footer { grid-column: 1 / -1; }

响应式卡片网格（无媒体查询）

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

居中

.center {
  display: grid;
  place-items: center; /* 等于 justify-items: center + align-items: center */
}

Grid vs Flexbox

	Grid	Flexbox
维度	二维	一维
思路	布局先定义，内容填入	内容驱动，自动排列
嵌套	一个容器搞定	可能需要多层嵌套
适用	页面骨架、仪表盘、复杂网格	导航栏、按钮组、列表

经验法则：

• 需要同时控制行和列 → Grid
• 只是沿着一个方向排列 → Flexbox
• 两者经常配合使用：页面整体用 Grid，组件内部用 Flexbox

边界

• Grid 的 gap 属性在所有现代浏览器中都支持
• grid-area 的名字必须是连续的矩形区域，不能定义 L 形或不规则形状
• 子元素默认按 DOM 顺序填充网格，order 属性可以改变顺序但不改变 DOM
• fr 单位在分配空间时会考虑 minmax 的最小值约束
• Grid 布局中，隐式创建的行（auto rows）默认大小是 auto，可以用 grid-auto-rows 控制

一句话记忆法

Grid 是二维布局：grid-template-columns/rows 定义网格，grid-template-areas 用名字布局，auto-fit + minmax 实现响应式。

Related notes

• CSS MOC
• css-flexbox
• CSS 居中布局