CSS3怎样实现网格布局

CSS3 的 Grid 布局（网格布局） 是目前最强大的二维布局系统，它可以同时控制行和列，非常适合整体页面结构或复杂的局部布局。

下面我将从核心概念、常用属性到实际示例，带你快速掌握 CSS Grid。

一、 核心概念

在使用 Grid 布局前，需要了解两个核心概念：

1. 网格容器（Grid Container）：设置了 display: grid 的元素。
2. 网格项目（Grid Item）：网格容器的直接子元素（注意：只能是直接子元素）。

二、 基本使用步骤

1. 启用 Grid 布局

首先，将父元素声明为网格容器：

.container {
  display: grid; /* 或者 inline-grid */
}

2. 定义行和列

使用 grid-template-columns 和 grid-template-rows 来划分网格。

• grid-template-columns: 定义列的数量和宽度。
• grid-template-rows: 定义行的数量和高度。

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px; /* 三列，每列宽 200px */
  grid-template-rows: 100px 100px; /* 两行，每行高 100px */
}

常用单位：

• px、% 等固定或相对单位。
• fr（fraction，剩余空间比例）：grid-template-columns: 1fr 2fr; 表示将剩余空间分为3份，第一列占1份，第二列占2份。
• auto：由内容撑开。
• repeat(次数, 大小)：简写重复。repeat(3, 1fr) 等同于 1fr 1fr 1fr。

3. 设置网格间距

使用 gap（以前写作 grid-gap）来设置行与列之间的间隙。

.container {
  gap: 10px; /* 行和列间距都是10px */
  /* 也可以分别设置：row-gap: 10px; column-gap: 20px; */
}

三、 控制子元素（项目）的位置

默认情况下，子元素会自动按顺序填充网格。我们也可以通过以下属性手动控制项目跨越的行列：

• grid-column: 起始线 / 结束线; 控制列跨度。
• grid-row: 起始线 / 结束线; 控制行跨度。
• 可以使用 span 关键字表示跨越几个格子。

.item-1 {
  grid-column: 1 / 3; /* 从第1根列线跨到第3根列线（占2列） */
  /* 等同于 grid-column: 1 / span 2; */
}

.item-2 {
  grid-row: 1 / span 2; /* 从第1根行线开始，跨2行 */
}

四、 完整基础示例

HTML:

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

CSS:

.container {
  display: grid;
  /* 定义两列：侧边栏 200px，主内容区占据剩余空间 */
  grid-template-columns: 200px 1fr;
  /* 定义三行：头部、中部（自适应）、底部 */
  grid-template-rows: 60px 1fr 60px;
  /* 定义区域模板，让代码更直观（可选但强烈推荐） */
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 10px;
  height: 100vh; /* 让容器占满全屏，方便看 1fr 效果 */
}

/* 通过 grid-area 把项目和上面的模板名字对应起来 */
.header  { grid-area: header; background: #ff9999; }
.sidebar { grid-area: sidebar; background: #99ccff; }
.main    { grid-area: main; background: #99ff99; }
.footer  { grid-area: footer; background: #ffcc99; }

.item {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
}

五、 进阶技巧：响应式网格

Grid 配合 repeat()、minmax() 和 auto-fit / auto-fill 可以非常轻松地实现响应式网格（不需要写一堆媒体查询）。

.container {
  display: grid;
  /* 
    auto-fit: 自动填充尽可能多的列
    minmax(200px, 1fr): 每列最小 200px，最大占满剩余空间
    效果：屏幕宽就显示多列，屏幕窄就自动换行变少列
  */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

六、 常用容器对齐属性（了解即可）

除了子元素定位，容器还可以控制整体网格在容器内的对齐方式：

• justify-items / align-items：控制所有子元素在各自网格区域内的水平/垂直对齐（值如 stretch 默认拉伸, center, start, end）。
• justify-content / align-content：当网格总大小小于容器时，控制整个网格在容器中的对齐方式。

总结

要实现 CSS3 网格布局，核心就这几步：

1. 父元素加 display: grid;
2. 用 grid-template-columns/rows 画出行列。
3. 用 gap 加间隙。
4. （按需）用 grid-template-areas 或 grid-column/row 安排子元素位置。

如果你想了解某个特定场景（比如和 Flexbox 的区别，或者某个复杂布局）的用法，可以随时告诉我！