速通前端 CSS 进阶：Grid 布局核心用法，实现复杂页面秒搭建

CSS Grid 布局是现代前端开发中的革命性工具，它能轻松处理复杂页面结构，让开发者告别繁琐的浮动和定位。本文将聚焦 Grid 的核心用法，通过简洁步骤助你快速掌握，并实现一个响应式页面布局。全程使用中文讲解，确保易懂实用。

一、Grid 布局基础：核心概念速览

Grid 布局基于网格系统，将页面划分为行和列，形成“容器”和“项目”的关系：

网格容器：通过 display: grid; 定义，容纳所有子元素。
网格项目：容器的直接子元素，自动成为网格项。
行与列：使用 grid-template-columns 和 grid-template-rows 定义网格结构，例如 $1fr 2fr$ 表示两列，第一列占1份宽度，第二列占2份（fr 是分数单位）。
网格间隙：gap 属性设置行列间距，例如 gap: 10px;。

二、核心用法详解：关键属性与应用

掌握以下属性，即可搭建90%的复杂布局。每个属性都通过示例说明：

定义网格结构

grid-template-columns：设置列宽。支持多种单位，如 px、% 或 fr。

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 三列：中间列宽为两侧的两倍 */
  grid-template-rows: 100px auto; /* 两行：第一行固定高度，第二行自适应 */
}

grid-template-areas：通过命名区域简化布局，适合复杂页面。

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

放置网格项目

grid-column 和 grid-row：指定项目跨越的行列。

.item1 {
  grid-column: 1 / 3; /* 从第1列开始，跨越到第3列前（即占两列） */
  grid-row: 1; /* 仅占第一行 */
}

grid-area：结合命名区域放置项目，代码更简洁。

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

响应式调整
使用媒体查询动态改变网格，适应不同屏幕：

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr; /* 小屏幕时变为单列 */
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
  }
}

三、实战：秒建复杂页面布局

以新闻网站为例，实现一个包含头部、侧边栏、主内容和页脚的响应式布局。HTML 结构简单：

<div class="container">
  <div class="header">头部</div>
  <div class="sidebar">侧边栏</div>
  <div class="main">主内容</div>
  <div class="footer">页脚</div>
</div>

CSS 代码（核心部分）：

.container {
  display: grid;
  gap: 15px; /* 统一间隙 */
  grid-template-columns: 1fr 3fr; /* 两列：侧边栏窄，主内容宽 */
  grid-template-rows: auto 1fr auto; /* 三行：头部和页脚自适应，主内容填满剩余空间 */
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  height: 100vh; /* 全屏高度 */
}

.header { grid-area: header; background: #f0f0f0; }
.sidebar { grid-area: sidebar; background: #e0e0e0; }
.main { grid-area: main; background: #d0d0d0; }
.footer { grid-area: footer; background: #f0f0f0; }

/* 响应式：小屏幕时侧边栏移到下方 */
@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
  }
}

效果说明：

桌面视图：两列布局，侧边栏占1份，主内容占3份。
移动视图：单列布局，侧边栏自动下移。
优势：代码不到20行，无需额外框架，布局灵活且易维护。

四、进阶技巧与常见问题

自动填充与自适应：用 repeat() 和 auto-fill 处理动态项目，如 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));。
对齐控制：justify-items 和 align-items 调整项目内部对齐。
性能优化：Grid 渲染快，但避免过度嵌套网格容器。
浏览器兼容：所有现代浏览器支持，旧版可通过前缀如 -ms-grid 降级。