CSS Grid布局中的重复模式(repeat)与fr单位 - 智猿学院-IT界的百科全书

好的，咱们今天就来聊聊CSS Grid布局里那对“神仙眷侣”——repeat()和fr单位。这俩家伙，一个负责“复制粘贴”，一个负责“雨露均沾”，简直是Grid布局里提高效率、玩转响应式的绝佳拍档。

一、故事的开始：Grid布局的“格子间”

要理解repeat()和fr，首先得对Grid布局有个基本的认识。你可以把Grid布局想象成一个巨大的表格，只不过这个表格比Excel表格更灵活、更强大。你可以用它来划分网页的结构，把网页分割成一个个“格子间”，然后把不同的内容放到这些格子间里。

就像盖房子一样，首先你要确定地基，也就是Grid容器。这个容器告诉浏览器：“嘿，我这里要用Grid布局了，你可得按照我的规矩来！”

<div class="grid-container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px; /* 三列，每列100px */
  grid-template-rows: 50px 50px; /* 两行，每行50px */
}

上面这段代码，我们就创建了一个简单的Grid容器，它有三列两行，每个格子的大小也固定了。但是，如果我们需要更多的列或行，而且每列或行的大小都一样，难道要一遍又一遍地写100px和50px吗？当然不用，这就轮到我们的主角之一——repeat()登场了。

二、 repeat()：懒人的福音，重复模式的魔法

repeat()函数就像一个“复制粘贴”的魔法棒，它可以帮你重复定义列或行的尺寸，省去你手动编写大量重复代码的烦恼。

repeat()函数的语法很简单：

repeat(重复的次数, 列或行的尺寸);

比如，上面的例子可以用repeat()简化成这样：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px); /* 等价于 100px 100px 100px */
  grid-template-rows: repeat(2, 50px);    /* 等价于 50px 50px */
}

是不是瞬间感觉代码简洁多了？ repeat()的第一个参数是重复的次数，第二个参数是你要重复的尺寸。你可以把尺寸设置成任何有效的CSS长度单位，比如像素（px）、百分比（%）、em、rem等等。

repeat()的进阶用法：auto-fill 和 auto-fit

repeat()除了可以指定重复次数，还可以使用auto-fill和auto-fit这两个关键字，让Grid布局更加灵活。

auto-fill：尽可能多地填充

auto-fill会尽可能多地创建列或行，直到容器的空间被填满为止。它不会考虑内容是否会超出容器的范围，只是机械地填充。
```
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
```
上面的代码中，minmax(100px, 1fr)表示每列的最小宽度是100px，最大宽度是1fr（后面会讲到fr单位）。 auto-fill会尽可能多地创建列，每列的宽度在100px到1fr之间。如果容器的宽度足够大，就可以创建很多列；如果容器的宽度不够大，就会创建较少的列，但每列的宽度都会尽可能地接近1fr。
auto-fit：自动适应内容

auto-fit和auto-fill很相似，但有一个重要的区别：如果容器的空间有剩余，auto-fit会将剩余空间平均分配给现有的列或行，而auto-fill则会保留剩余空间。换句话说，auto-fit会使列或行自动适应内容，使其尽可能地占据整个容器的空间。
```
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
```
在上面的代码中，如果容器的宽度足够大，可以创建4列，但只有3个内容项，那么auto-fit会将剩余的空间平均分配给这3列，使它们占据整个容器的宽度。而如果使用auto-fill，则会创建4列，但第4列是空的，不会占据任何空间。

小结：repeat()的优势

简化代码：避免重复编写相同的列或行尺寸。
提高效率：减少代码量，提高开发效率。
灵活响应：结合auto-fill和auto-fit，可以创建灵活的响应式布局。

三、 fr：弹性单位，雨露均沾的奥秘

fr是Grid布局中一个非常特殊的单位，它代表的是可用空间的一个比例。你可以把它想象成“份”，整个Grid容器的可用空间被分成若干份，fr单位就是用来表示每一份的大小。

举个例子，如果你定义了三列，宽度分别是1fr、2fr、1fr，那么这三列会分别占据可用空间的1/4、1/2和1/4。

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

在这个例子中，如果Grid容器的宽度是400px，那么第一列的宽度就是100px，第二列的宽度就是200px，第三列的宽度也是100px。

fr单位的计算规则

fr单位的计算规则有点复杂，但我们可以用一个简单的例子来理解：

假设我们有三列，宽度分别是100px、1fr、2fr。 Grid容器的宽度是500px。

计算可用空间：首先，我们要从容器的宽度中减去固定尺寸的列的宽度，得到可用空间。在这个例子中，可用空间是500px - 100px = 400px。
计算fr单位的大小：然后，我们要把可用空间分成若干份，每一份的大小就是fr单位的大小。在这个例子中，fr单位的总份数是1 + 2 = 3份，所以每一份的大小是400px / 3 = 133.33px。
计算fr单位的宽度：最后，我们要把fr单位的大小乘以fr单位的份数，得到每一列的宽度。在这个例子中，第二列的宽度是1fr = 133.33px，第三列的宽度是2fr = 266.66px。

fr单位的优势

弹性布局：fr单位可以根据可用空间自动调整列或行的尺寸，创建弹性布局。
比例分配：fr单位可以按照比例分配可用空间，实现灵活的布局效果。
响应式设计：fr单位可以轻松实现响应式设计，使网页在不同的屏幕尺寸下都能保持良好的显示效果。

四、 repeat()和fr的完美结合：打造响应式Grid布局

repeat()和fr可以完美结合，共同打造灵活的响应式Grid布局。我们可以使用repeat()来创建多列或多行，然后使用fr单位来分配可用空间，使列或行自动适应内容和屏幕尺寸。

例如，我们可以创建一个响应式的图片画廊：

<div class="gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <img src="image4.jpg" alt="Image 4">
  <img src="image5.jpg" alt="Image 5">
</div>

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px; /* 设置格子之间的间距 */
}

.gallery img {
  width: 100%;
  height: auto;
  object-fit: cover; /* 使图片填充整个格子 */
}

在这个例子中，我们使用了repeat(auto-fit, minmax(200px, 1fr))来创建多列。 minmax(200px, 1fr)表示每列的最小宽度是200px，最大宽度是1fr。 auto-fit会尽可能多地创建列，并使列自动适应内容和屏幕尺寸。这样，图片画廊在不同的屏幕尺寸下都能保持良好的显示效果。

五、总结：Grid布局的“黄金搭档”

repeat()和fr是CSS Grid布局中两个非常重要的概念。 repeat()可以简化代码，提高效率，而fr可以创建弹性布局，实现响应式设计。它们就像Grid布局的“黄金搭档”，可以帮助我们轻松打造灵活、强大的网页布局。

希望通过这篇文章，你能够对repeat()和fr有更深入的理解，并在实际项目中灵活运用它们，创造出更出色的网页作品。记住，熟能生巧，多加练习，你也能成为Grid布局的高手！

发表回复 取消回复

发表回复取消回复