CSSGrid布局教程：grid-template-columns和rows设置详解

小伙伴们有没有觉得学习文章很有意思？有意思就对了！今天就给大家带来《CSS Grid布局实战：grid-template-columns和rows设置教程》，以下内容将会涉及到，若是在学习中对其中部分知识点有疑问，或许看了本文就能帮到你！

CSS Grid布局的核心在于通过grid-template-columns和grid-template-rows定义行列结构，结合fr单位、repeat()函数与grid-auto-rows等特性实现灵活的二维布局。首先，display: grid创建网格容器，随后grid-template-columns和grid-template-rows设定显式网格的列宽与行高，支持px、%、auto及fr等单位，其中fr单位可智能分配剩余空间，避免复杂计算。例如200px auto 1fr能实现固定、自适应与弹性分配的组合。repeat()函数简化重复轨道定义，如repeat(5, 1fr)生成五等分列，结合auto-fill与minmax(200px, 1fr)可实现响应式自动换行布局，无需媒体查询。当网格项超出显式网格范围时，Grid自动生成隐式行或列，其大小由grid-auto-rows或grid-auto-columns控制，默认为auto，但可通过minmax设置最小高度（如minmax(150px, auto)）以保持视觉一致性。该机制在处理动态数量内容（如商品列表、图库）时尤为高效，兼顾弹性与规整。掌握显式与隐式网格的协同工作，是构建现代响应式页面的关键。

CSS Grid布局的核心，在于它提供了一种二维的网格系统，让我们能够非常直观地在页面上划分行和列。而grid-template-columns和grid-template-rows这两个属性，正是我们定义这些列和行的“蓝图”，它们决定了网格有多少列、多少行，以及每一列、每一行各自占据多大的空间。理解并实践好这两个属性，几乎就掌握了Grid布局的半壁江山。

CSS Grid布局无疑是现代前端开发中处理复杂布局的利器。当我们需要在容器内创建一个结构化的二维网格时，display: grid是第一步，紧接着，grid-template-columns和grid-template-rows就成了我们手里的画笔，用来描绘这个网格的骨架。

想象一下，你正在设计一个相册页面，或者是一个商品展示区，你希望图片或者商品卡片能整齐地排列成几行几列。传统的浮动或者Flexbox在处理这种二维布局时，往往需要一些hack或者额外的计算。但有了Grid，这一切都变得异常清晰。

grid-template-columns用于定义网格的列，而grid-template-rows则用于定义网格的行。它们的值是一系列表示轨道（track）大小的列表，每个值代表一列或一行的大小。这些大小可以是固定的像素值（px），相对的百分比（%），灵活的fr单位，自动适应内容的auto，甚至是minmax()函数来定义一个范围。

举个例子，如果你想创建一个三列布局，第一列固定200px宽，第二列自适应内容，第三列占据剩余空间的一半，你可以这样写：

.container {
  display: grid;
  grid-template-columns: 200px auto 1fr; /* 定义三列 */
  grid-template-rows: 100px auto; /* 定义两行，第一行100px，第二行自适应 */
  gap: 10px; /* 列与行之间的间距 */
}

这里，200px是固定宽度，auto会根据内容自动调整大小，1fr则会占据所有可用空间中的一个“分数”（fraction）。如果还有其他fr单位，它们会按比例分配剩余空间。比如1fr 2fr 1fr意味着三列分别占据可用空间的1/4、2/4、1/4。

定义行也是同样的道理。grid-template-rows: 100px auto;表示第一行高度为100px，第二行高度由其内容决定。如果你没有显式定义所有行，那么Grid会自动创建“隐式行”来容纳多余的网格项，这些隐式行的大小可以通过grid-auto-rows来控制。

我个人觉得，Grid布局最吸引人的地方之一，就是它对“可用空间”的智能处理。fr单位的引入，彻底改变了我们对响应式布局的思考方式。

CSS Grid布局中fr单位的魔法与实践

在我看来，fr单位是CSS Grid布局里一个真正体现其“智能”和“弹性”的核心概念。它代表的是“可用空间”的一个分数（fraction），而不是一个绝对值或相对于父容器的百分比。这意味着，当其他固定尺寸（如px）或内容自适应尺寸（auto）的轨道确定后，fr单位会去瓜分剩下的那部分空间。

这解决了什么痛点呢？想想以前我们做响应式布局，经常要计算百分比，或者用JavaScript去动态调整宽度。现在，有了fr，一切都变得简单而强大。

一个典型的场景是，你有一个侧边栏和一个主内容区域。你希望侧边栏固定宽度，比如250px，而主内容区域则自动填充剩余的所有空间。

.layout {
  display: grid;
  grid-template-columns: 250px 1fr; /* 侧边栏250px，主内容区占据剩余全部空间 */
}

这比写calc(100% - 250px)要优雅和直观得多。

再比如，如果你有三列，希望它们平均分配空间，但又不想使用百分比（因为百分比在某些情况下可能与gap属性的计算产生冲突），你可以简单地写：

.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 三列平均分配可用空间 */
  gap: 20px;
}

Grid会先扣除gap的宽度，然后将剩余空间平均分成三份。这种处理方式，让布局在有间距的情况下依然能保持完美对齐，且无需手动计算，极大地提升了开发的效率和布局的健壮性。

我通常会这样思考fr单位：它就像一个智能的“分配器”。无论屏幕大小如何变化，或者其他固定尺寸的元素如何调整，fr总能确保其所代表的轨道，在可用空间中获得它应有的那一份，这种弹性是百分比和auto难以比拟的。

如何利用repeat()函数简化Grid网格定义并实现动态布局？

在实际项目里，我们经常需要创建大量重复的行或列。比如一个有10列的表格，或者一个多行多列的图片墙。如果一行一行、一列一列地去写grid-template-columns: 100px 100px 100px ...，那简直是噩梦。这时候，repeat()函数就派上用场了，它能极大地简化我们的代码，让网格定义变得简洁而富有表现力。

repeat()函数的基本语法是repeat(count, track-list)。count是你希望重复的次数，track-list是你想要重复的轨道大小或模式。

例如，创建一个5列，每列都是1fr的网格：

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 等同于 1fr 1fr 1fr 1fr 1fr */
}

这不仅代码量更少，可读性也更高。

repeat()的真正威力，往往体现在与auto-fill或auto-fit以及minmax()函数结合使用时，这能实现非常强大的响应式和动态布局。

设想一个场景：你有一个商品列表，你希望每行尽可能多地显示商品，但每个商品的最小宽度不能低于200px，同时它们又能平均分配剩余空间。

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}

这里，repeat(auto-fill, ...)告诉浏览器：在容器宽度允许的情况下，尽可能多地填充列。minmax(200px, 1fr)则定义了每列的尺寸范围：最小200px，最大占据可用空间的1份。

这意味着，当容器足够宽时，它会创建多列，每列至少200px宽，并等比例分配剩余空间。如果容器变窄，不足以容纳更多列时，列数会自动减少，同时现有列会尽可能地收缩到200px，直到达到最小宽度，然后内容就会换行到下一行。这种自适应能力，是我在做各种卡片布局时最喜欢用的模式，它省去了大量的媒体查询，让布局变得非常“智能”。

Grid布局中隐式网格与显式网格的边界及grid-auto-rows的控制

理解CSS Grid布局，除了显式地定义grid-template-columns和grid-template-rows来创建“显式网格”之外，我们还需要关注“隐式网格”的概念。这听起来有点抽象，但其实在实际开发中非常实用。

显式网格，就是我们通过grid-template-columns和grid-template-rows明确指定了行和列的数量及大小的区域。比如，你定义了3列2行，那么这个3x2的区域就是你的显式网格。

然而，如果你的网格项超出了这个显式定义的范围，比如你有7个网格项，但你只定义了2行（2x3=6个位置），那么第7个网格项就会被放置到“隐式网格”区域。Grid布局会自动创建额外的行或列来容纳这些溢出的网格项，这些自动创建的行或列就构成了隐式网格。

一个常见的场景是，你只定义了列，让行自动生成：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 定义三列 */
  /* 没有定义grid-template-rows */
}

此时，所有网格项都会按照三列的规则依次排列。当第一行被填满后，Grid会自动创建第二行、第三行……这些自动创建的行，就属于隐式网格。

那么，这些隐式网格的行或列，它们的大小是多少呢？默认情况下，它们的大小是auto，即根据内容自适应。但很多时候，我们希望对这些隐式轨道的大小有更精细的控制。这就是grid-auto-rows和grid-auto-columns属性的作用。

• grid-auto-rows: 定义所有隐式行的默认高度。
• grid-auto-columns: 定义所有隐式列的默认宽度。

比如，你希望所有自动生成的行都至少有150px高，并且最多能扩展到内容所需的高度：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(150px, auto); /* 隐式行至少150px高，最多auto */
}

这意味着，无论有多少网格项溢出，它们所在的隐式行都会遵循minmax(150px, auto)的规则。这在构建可变内容数量的列表或画廊时特别有用，它确保了布局的整体一致性，同时又保持了内容的灵活性。

我个人在处理一些不确定内容数量的组件时，特别喜欢利用grid-auto-rows来保持视觉上的整齐。它避免了因为内容过少导致行高塌陷，或者内容过多导致行高失控的情况，提供了一个非常好的平衡点。理解并善用显式与隐式网格的边界，能让你的Grid布局更加强大和灵活。

终于介绍完啦！小伙伴们，这篇关于《CSSGrid布局教程：grid-template-columns和rows设置详解》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！