Web前端开发：Grid 布局（网格布局）

一、Grid 是什么？

        Grid（网格布局） 是 CSS 中一种二维布局系统，可以同时控制行和列的排列方式。相比传统的浮动布局和 Flexbox（一维布局），Grid 更适合构建复杂的网页结构（比如仪表盘、卡片布局等）。

 

二、核心概念

1. 网格容器（Grid Container）

通过 display: grid 将一个元素定义为网格容器，它的直接子元素自动成为网格项目（Grid Items）。

.container {
  display: grid;
}

2. 行与列（Rows & Columns）

• 轨道（Track）：行或列的集合

• 单元格（Cell）：行和列的交叉区域

• 网格线（Grid Line）：分隔行或列的线（编号从 1 开始）

 

三、基础用法

1. 定义行列大小

.container {
  grid-template-columns: 100px 200px 1fr; /* 3列：100px、200px、剩余空间 */
  grid-template-rows: 50px auto; /* 2行：50px、自适应高度 */
}

• fr 单位：按比例分配剩余空间（类似“份”）

• repeat()：简化重复值
  grid-template-columns: repeat(3, 1fr); → 3 列等宽

 2. 间距控制

.container {
  gap: 10px; /* 行和列间距均为 10px */
  row-gap: 20px; /* 单独设置行间距 */
  column-gap: 15px;
}

四、定位网格项目

1. 按网格线定位

.item {
  grid-column-start: 1; /* 起始于第1列线 */
  grid-column-end: 3;   /* 结束于第3列线（跨2列） */
  grid-row: 2 / 4;      /* 简写：从第2行线到第4行线 */
}

2. 使用 span 关键字

.item {
  grid-column: 1 / span 2; /* 从第1列开始，跨越2列 */
}

五、对齐方式

1. 整体对齐

.container {
  justify-content: center; /* 水平居中整个网格 */
  align-content: end;      /* 垂直底部对齐 */
}

2. 单元格内对齐

.container {
  justify-items: center; /* 所有项目水平居中 */
  align-items: stretch;  /* 默认拉伸填满单元格 */
}

/* 单独控制某个项目 */
.item {
  justify-self: start;
  align-self: end;
}

 

六、响应式布局技巧

1. 自动填充列

.container {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

• auto-fill：自动填充尽可能多的列

• minmax(200px, 1fr)：列宽最小 200px，最大按比例分配

 2. 命名区域（适合复杂布局）

.container {
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

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

七、Grid vs Flexbox

特性	Grid	Flexbox
维度	二维（行+列）	一维（行或列）
适用场景	整体页面布局	组件内部排列
内容优先	容器控制布局	内容决定布局