异常教程

CSS grid-template-columns 属性（千字长文）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

前言：CSS Grid 带来的布局革命

在网页开发领域，布局设计始终是开发者需要攻克的核心挑战之一。从早期的表格布局，到浮动（Float）与定位（Position）的复杂组合，再到 Flexbox 的出现，开发者们一直在寻找更优雅的解决方案。而 CSS Grid 的诞生，尤其是其中的 grid-template-columns 属性，彻底改变了二维布局的构建方式。本文将深入解析这一属性的使用方法，通过循序渐进的案例和形象化比喻，帮助读者掌握如何用 CSS Grid 构建灵活且响应式的网页布局。

一、理解 CSS Grid 的基础概念

1.1 网格容器与网格项

CSS Grid 布局由两个核心部分组成：网格容器（Grid Container） 和 网格项（Grid Items）。通过 display: grid 将一个容器定义为网格，其直接子元素则自动成为网格项。例如：

.container {
  display: grid;
  /* 其他属性 */
}

1.2 grid-template-columns 的核心作用

grid-template-columns 属性用于定义网格的列轨道（Column Tracks）。轨道是网格中相邻线之间的空间，可以理解为“书架上的隔板”。通过设置这一属性，开发者能够精确控制每列的宽度和分布方式。

二、grid-template-columns 的基础语法与常用值

2.1 基本语法结构

该属性的语法格式为：

grid-template-columns: <track-size> [ <track-size> ]* ;

其中 <track-size> 可以是以下几种值：

2.1.1 固定宽度值

使用像素（px）、百分比（%）、视窗单位（vw）等固定值，直接指定列宽：

/* 创建三列：200px、10%、300px */
.container {
  grid-template-columns: 200px 10% 300px;
}

2.1.2 自动填充分列

通过 auto 关键字，让浏览器根据内容自动分配列宽：

/* 三列，宽度由内容决定 */
.container {
  grid-template-columns: auto auto auto;
}

2.1.3 弹性单位（fr）

fr（fraction）是 CSS Grid 引入的弹性单位，代表“可用空间的等分”。例如：

/* 三列，宽度比为 1:2:1 */
.container {
  grid-template-columns: 1fr 2fr 1fr;
}

此时，总可用空间会被均分为 1+2+1=4 份，第二列占据 2 份，即总宽度的 50%。

三、单位详解：如何选择合适的列宽单位

3.1 固定单位 vs 弹性单位

  • 固定单位（如 px、%）：适合需要精确控制列宽的场景，但可能因屏幕尺寸变化导致布局断裂。
  • 弹性单位（fr）：通过比例分配空间，适合需要动态调整的响应式布局。

比喻：
fr 单位就像一根弹簧，能根据容器大小自动伸缩。例如，1fr 1fr 等同于将容器平均分为两列，而 1fr 2fr 则像一个“长弹簧”和“短弹簧”的组合，总长度保持不变。

3.2 混合使用单位

开发者可以将不同单位组合使用，例如：

/* 一列固定宽度，剩余空间按比例分配 */
.container {
  grid-template-columns: 200px 1fr 2fr;
}

3.3 响应式布局技巧

结合 calc() 函数，可实现更复杂的计算：

/* 混合固定值与弹性单位 */
.container {
  grid-template-columns: calc(200px + 10%) 1fr;
}

四、进阶技巧：掌握高级布局模式

4.1 自动填充分列（repeat() 函数）

当需要重复相同轨道时，repeat() 函数可简化代码：

/* 生成 5 列，每列 100px 宽 */
.container {
  grid-template-columns: repeat(5, 100px);
}

/* 或等比分配空间 */
.container {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

auto-fit 和 minmax() 的组合常用于创建响应式网格，例如自适应卡片布局。

4.2 轨道间距与间隙（gap 属性）

通过 grid-column-gap 或简写 gap 属性，可以设置列与列之间的间距：

.container {
  grid-template-columns: 1fr 1fr;
  gap: 20px; /* 同时设置行与列的间隙 */
}

4.3 线名称（Line Names）

为网格线命名，可更灵活地定位网格项：

.container {
  grid-template-columns: [main-start] 1fr [content] 2fr [main-end];
}

此时，网格项可通过 grid-column: main-start / main-end 定位到整个容器。

五、实战案例：构建响应式博客布局

5.1 需求分析

假设要设计一个博客页面，包含以下区域：

  • 左侧侧边栏（固定宽度 250px）
  • 主内容区（自适应剩余空间）
  • 移动端下侧边栏折叠为底部导航栏

5.2 HTML 结构

<div class="blog-container">
  <aside class="sidebar">侧边栏内容</aside>
  <main class="content">文章列表</main>
</div>

5.3 CSS 实现

.blog-container {
  display: grid;
  grid-template-columns: 250px 1fr; /* 桌面端布局 */
  gap: 20px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .blog-container {
    grid-template-columns: 1fr; /* 移动端单列 */
  }
  .sidebar {
    order: 2; /* 将侧边栏移动到内容下方 */
  }
}

5.4 效果说明

  • 桌面端：侧边栏固定宽度，主内容区占据剩余空间。
  • 移动端：通过媒体查询切换为单列布局，侧边栏变为底部导航栏。

六、常见问题与最佳实践

6.1 问题：列宽计算不准确？

  • 可能原因：未考虑 gap 间隙或浏览器默认样式。
  • 解决方案：使用浏览器开发者工具检查计算后的列宽，或通过 box-sizing: border-box 包含边距和填充。

6.2 问题：弹性列不按预期比例分配？

  • 可能原因：容器父级或自身尺寸未定义。
  • 解决方案：确保网格容器有明确的宽高限制，例如 width: 100%。

6.3 最佳实践建议

  1. 优先使用 fr 单位：便于创建等比例或动态布局。
  2. 善用 repeat()：减少重复代码，提升可维护性。
  3. 结合 minmax()：确保列宽在不同屏幕尺寸下合理变化。

结论：CSS Grid 的未来与你的布局之旅

通过掌握 grid-template-columns 属性，开发者能够快速构建复杂且优雅的网页布局。从基础的固定宽度到高级的弹性分配，这一属性提供了前所未有的灵活性。随着 CSS Grid 的持续发展，它将成为现代前端开发中不可或缺的核心工具。建议读者通过实践不断探索，尝试将 grid-template-columns 与其他 CSS Grid 属性（如 grid-template-rows、grid-auto-flow）结合，逐步解锁更多可能性。

无论是构建电商商品列表、博客文章展示，还是复杂的仪表盘界面，CSS Grid 都能帮助你以更简洁的代码实现预期效果。现在，是时候拿起你的代码编辑器，开始你的 CSS Grid 布局实验了！

最新发布

查看更多文章