网格布局 CSS Grid

CSS Grid 是 CSS3 提供的二维布局系统，可以同时控制行和列，比 Flexbox（一维布局）更强大，适用于复杂的网页布局设计。

一、Grid 基本概念

1、Grid 容器（Grid Container）

通过 display: grid 或 display: inline-grid 定义一个 Grid 容器：

.container {
  display: grid;
}

2、Grid 项目（Grid Items）

Grid 容器的直接子元素自动成为 Grid 项目：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

3、网格线（Grid Lines）

Grid 布局由行（row）和列（column）组成，网格线是它们的边界线

二、Grid 容器属性

1、定义列和行：grid-template-columns / grid-template-rows

• grid-template-columns：定义列宽度
• grid-template-rows：定义行高度

示例：3 列（200px 1fr 200px） + 2 行（100px auto）

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px; /* 1fr = 剩余空间 */
  grid-template-rows: 100px auto;
}

单位说明：

fr（fraction）：剩余空间分配比例

auto：自动调整大小

minmax(min, max)：定义最小和最大尺寸

2、定义网格区域：grid-template-areas

通过命名区域布局：

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

HTML 结构：

<div class="container">
  <div class="item-header">Header</div>
  <div class="item-sidebar">Sidebar</div>
  <div class="item-main">Main</div>
  <div class="item-footer">Footer</div>
</div>

3、行列间距：gap（旧版：grid-gap）

row-gap：行间距

column-gap：列间距

gap：简写（row-gap column-gap）

.container {
  gap: 10px 20px; /* 行间距 10px，列间距 20px */
}

4、对齐方式

justify-items：所有项目在列方向的对齐（默认 stretch）

    start | end | center | stretch

align-items：所有项目在行方向的对齐（默认 stretch）

    start | end | center | stretch

justify-content：整个网格在容器列方向的对齐

    start | end | center | stretch | space-around | space-between | space-evenly

align-content：整个网格在容器行方向的对齐

三、Grid 项目属性

1、项目位置：grid-column / grid-row

grid-column-start / grid-column-end：列起始和结束线

grid-row-start / grid-row-end：行起始和结束线

简写：

    grid-column: <start> / <end>;

    grid-row: <start> / <end>;

示例：跨 2 列 + 跨 3 行

.item {
  grid-column: 1 / 3; /* 从第 1 列线到第 3 列线 */
  grid-row: 1 / 4;    /* 从第 1 行线到第 4 行线 */
}

2、项目对齐：justify-self / align-self

justify-self：单个项目在列方向的对齐

align-self：单个项目在行方向的对齐

.item {
  justify-self: center;
  align-self: end;
}

3、 项目顺序：order

调整项目的显示顺序（数值越小越靠前）：

.item {
  order: 1;
}

4、Grid 布局示例

1、经典 12 列网格

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
}
.item {
  grid-column: span 4; /* 每项占 4 列 */
}

2、圣杯布局（Header + Sidebar + Main + Footer）

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

3、自适应卡片布局

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

auto-fill：自动填充列

minmax(250px, 1fr)：最小 250px，最大占剩余空间

5、浏览器兼容性

CSS Grid 已被所有现代浏览器支持（包括 IE11+，但部分语法不同）。可以使用 @supports 检测支持情况：

@supports (display: grid) {
  .container {
    display: grid;
  }
}