精通 CSS Grid Tracks：现代布局完整指南（2026）

It looks like the text you’d like translated isn’t included in your message. Could you please paste the content you want translated (excluding the source line you’ve already provided)? Once I have the text, I’ll translate it into Simplified Chinese while preserving the original formatting, markdown, and code blocks.

介绍

是否曾盯着网页布局发呆，心想：“他们是怎么让那些列完美运作的？”或者你曾与 float 和 flexbox 纠缠到深夜，渴望更好的方案。欢迎来到 CSS Grid Tracks——你一直在等待的布局革命。本指南将向你展示如何轻松构建杂志级别的布局，毫无头疼之忧。

什么是网格轨道？

当你设置 grid-template-columns 时，你正在定义列轨道。grid-template-rows 定义行轨道。每条轨道是两条网格线之间的空间。轨道天生具有响应性：它们可以弹性伸缩、增长、收缩，并适应不同的屏幕尺寸。

设置你的轨道：真正有意义的语法

/* Basic fixed‑and‑flex layout */
.container {
  display: grid;
  grid-template-columns: 200px 1fr 300px;
  grid-template-rows: auto 1fr auto;
}

• 列 1： 固定为 200 px。
• 列 2： 1fr（一个分数单位）占据剩余空间。
• 列 3： 固定为 300 px。
• 行： 顶部和底部使用 auto（根据内容大小），中间使用 1fr（占据剩余高度）。

现代响应式方法

/* Fully responsive grid without media queries */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

• 创建尽可能多的 250 px 列，以适应屏幕。
• 如果有额外空间，则等比例拉伸这些列。
• 在较小屏幕上优雅换行。
• 在项目之间保持一致的 20 px 间距。

实际案例（因为理论很无聊）

现代仪表盘布局

.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr auto;
  min-height: 100vh;
}

/* Sidebar spans the full height */
.sidebar { 
  grid-column: 1; 
  grid-row: 1 / -1; 
}

Pinterest 风格卡片布局

.pinterest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-auto-rows: 10px; /* Controls the rhythm */
  gap: 15px;
}

圣杯布局（2024 更新版）

.app {
  display: grid;
  grid-template:
    "header header" auto
    "sidebar main" 1fr
    "footer footer" auto
    / 200px 1fr;
  min-height: 100vh;
}

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

grid-template 简写在单个简洁的声明中同时定义了命名区域和轨道尺寸。

实用技巧，真正节省时间

.container {
  grid-template-columns: 
    [sidebar-start] 250px 
    [sidebar-end content-start] 1fr 
    [content-end];
}

现在，你可以使用 grid-column: sidebar-start / sidebar-end 来定位元素，而无需记住行号。

像专业人士一样使用 minmax()

• auto-fit 将轨道拉伸以填满可用空间。
• auto-fill 不断添加空轨道，保持布局网格。

间隙是你的朋友

始终使用 gap 属性（或 row-gap / column-gap）可以简化间距，避免额外的 margin hack。

常见的“等等，什么？”时刻解决方案

• 如何居中单个项目？

  .centered {
    place-self: center; /* shorthand for align-self & justify-self */
  }

• 为什么我的网格不起作用？

  1. 确认容器已设置 display: grid。
  2. 检查轨道定义中是否有拼写错误。
  3. 使用浏览器的开发者工具检查网格线。

未来是基于轨道的

浏览器对 CSS Grid 的支持基本上是全覆盖的。除了旧版 Internet Explorer（已不再是实际的目标）之外，您可以在生产环境中自信地使用网格轨道。

您的下一步

• 请记住：fr 单位是剩余空间的分数。
• auto 根据内容自动调整大小。
• minmax() 是您响应式布局的好帮手。
• repeat() 让您免于手动编写重复的轨道定义。

尝试使用上述模式，进行组合，并将其应用到您自己的设计中。

收尾：从困惑到自信

网格系统直观，因为它映射了我们对布局的思考方式——列和行之间的清晰关系。不再需要脆弱的浮动技巧或无尽的媒体查询技巧。只有干净、易维护且可预测的布局。

FAQs

Q: 使用 CSS Grid 的性能影响如何？
A: 可以忽略不计。现代浏览器会优化网格计算，布局工作在渲染引擎中完成。

Q: 我该如何调试 Grid 布局？
A: 使用浏览器的“布局”或“网格”检查工具（Chrome、Firefox、Edge 均提供）来可视化网格线、区域和轨道尺寸。

Q: 有哪些可访问性问题吗？
A: Grid 本身不会影响可访问性，但请确保通过在 DOM 中按视觉顺序放置项目来保持逻辑阅读顺序，或谨慎使用 grid-auto-flow: dense。

Q: 何时不该使用 Grid？
A: 对于简单的单向布局（例如水平导航栏），Flexbox 可能更简单。不过，对于大多数复杂页面布局，Grid 是理想选择。