精通 CSS Grid 响应式布局：全面指南

I’m happy to translate the article for you, but I need the full text of the article (the content you’d like translated). Could you please paste the article’s body here? Once I have the text, I’ll provide a Simplified Chinese translation while preserving the original formatting, markdown, and any code blocks or URLs.

理解 CSS Grid 的核心概念

在开始构建之前，让我们先掌握一下使 CSS Grid 如此直观的基本术语。

与主要用于单维布局（行 或 列）的 Flexbox 不同，CSS Grid 擅长二维布局，能够同时控制行和列。这使它成为整体页面结构和复杂组件布局的理想工具。

Source: …

轻松定义网格结构

CSS Grid 的魔力始于为网格容器及其轨道设定属性。以下是必备属性。

设置网格容器

/* Turn an element into a grid container */
.container {
  display: grid;
}

定义列和行

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;   /* 三列：中间列宽度是两倍 */
  grid-template-rows: auto 200px 1fr;    /* 三行：自动高度、固定 200px、剩余空间 */
  gap: 20px;                            /* 网格单元之间的间距 */
}

使用 repeat() 和 minmax() 实现灵活模式

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

repeat(auto-fit, minmax(250px, 1fr)) 模式是 CSS Grid 响应式布局 的基石：它会创建尽可能多的 250 px 宽列，拉伸以填满可用空间，并在必要时换行。

使用网格模板区域实现语义化布局

.page-layout {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  gap: 10px;
}

Source: …

在 CSS Grid 响应式布局 中放置和对齐项目

一旦定义好网格结构，放置项目就很直接。你可以使用 基于线的放置 或 基于区域的放置。

基于线的放置

.item-a {
  grid-column: 1 / 3;   /* 从列线 1 开始，结束于列线 3（跨越 2 列） */
  grid-row: 2;           /* 从行线 2 开始 */
}

.item-b {
  grid-column: 3 / span 1;   /* 从列线 3 开始，跨越 1 列 */
  grid-row: 1 / span 2;       /* 从行线 1 开始，跨越 2 行 */
}

基于区域的放置（使用 grid-template-areas）

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

对齐属性

构建真正的 CSS Grid 响应式布局

CSS Grid 在响应式设计中的强大之处在于灵活单位、区域定义与媒体查询的结合。

HTML 标记

<div class="page-layout">
  <header class="header">Header</header>
  <nav class="nav">Navigation</nav>
  <main class="main">Main Content</main>
  <aside class="aside">Sidebar</aside>
  <footer class="footer">Footer</footer>
</div>

响应式 CSS

.page-layout {
  display: grid;
  grid-template-columns: 1fr;               /* Small screens: single column */
  grid-template-rows: auto;
  grid-template-areas:
    "header"
    "nav"
    "main"
    "aside"
    "footer";
  gap: 10px;
  min-height: 100vh;                        /* Ensure it takes full viewport height */
}

/* Tablet & larger */
@media (min-width: 768px) {
  .page-layout {
    grid-template-columns: 1fr 3fr;         /* Two columns: sidebar + main */
    grid-template-areas:
      "header header"
      "nav    main"
      "nav    aside"
      "footer footer";
  }
}

/* Desktop & larger */
@media (min-width: 1024px) {
  .page-layout {
    grid-template-columns: 1fr 4fr 1fr;     /* Three columns: nav, main, aside */
    grid-template-areas:
      "header header header"
      "nav    main    aside"
      "footer footer  footer";
  }
}

通过这些媒体查询，布局会从移动设备上的单列堆叠，优雅地过渡到平板上的两列布局，最终在更大屏幕上呈现完整的三列布局。

---

🎉 你已准备好！

现在你已经拥有了创建 CSS Grid 响应式布局 的坚实基础。尝试这些概念，微调示例代码，开始构建在任何设备上都能出色呈现的自适应界面。祝你玩得开心，网格布局愉快！

/* Layout definition */
.page-layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "nav"
    "main"
    "aside"
    "footer";
}

/* Mobile – single‑column layout */
@media (max-width: 599px) {
  .page-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "nav"
      "main"
      "aside"
      "footer";
  }
}

/* Tablet – two‑column layout */
@media (min-width: 600px) and (max-width: 1023px) {
  .page-layout {
    grid-template-columns: 1fr 2fr;
    grid-template-areas:
      "header header"
      "nav    main"
      "nav    aside"
      "footer footer";
  }
}

/* Desktop – three‑column layout */
@media (min-width: 1024px) {
  .page-layout {
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-areas:
      "header header header"
      "nav    main   aside"
      "footer footer footer";
  }
}

/* Basic styling for visibility */
.page-layout > * {
  background-color: #e0e0e0;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
}
header { background-color: #a7d9b7; }
nav    { background-color: #a7c0d9; }
main   { background-color: #d9a7a7; }
aside  { background-color: #d9cfa7; }
footer { background-color: #b7a7d9; }

本示例演示了如何轻松地在不同断点使用 grid-template-areas 和媒体查询重新定义整个布局，使 CSS Grid Responsive Layouts 的实现变得愉快。

---

掌握 CSS Grid 的关键要点

• CSS Grid 是一种二维布局系统，非常适合整体页面结构。
• 在容器上使用 display: grid;。
• grid-template-columns 和 grid-template-rows 用于定义轨道结构，fr、repeat() 和 minmax() 是实现灵活布局的关键。
• grid-template-areas 提供了一种高度语义化的方式来定义和管理复杂布局。
• 将 Grid 与 媒体查询 结合，可轻松创建 CSS Grid 响应式布局，适配任何屏幕尺寸。
• auto-fit / auto-fill 搭配 minmax() 是实现动态尺寸、自动换行网格的首选方案。

您最喜欢的 CSS Grid 小技巧是什么？

CSS Grid 是前端开发的革命性工具。通过掌握其概念，您可以用更少的代码构建极其强大且灵活的布局，并提升代码的可读性。尝试这些属性，看看它们如何改变您的工作流程。

您在构建 CSS Grid 响应式布局时常用的策略是什么？ 在下方评论中分享您最喜欢的技巧、窍门或遇到的挑战吧！如果您觉得本指南有帮助，欢迎分享给您的网络，并关注我以获取更多深入的网页开发教程。

祝网格布局愉快！