[译]CSS Grid #13：auto-fill 和 auto-fit 关键字在 Grid 布局中，使用 auto-

原文：CSS Grid #13: The auto-fill and auto-fit Keywords in CSS Grid, by Jorge Montoya。

导读： joomlashack.com 是一家为著名 CRM 系统 Joomla 提供扩展和模板的一家公司。未来 Joomla 4 将使用 CSS Grid 进行布局。作者 Jorge Montoya 为了帮助 Joomla 开发者掌握 Grid 布局背后的核心概念，发布了这个系列的教程。本篇是本系列教程的第十三篇。我在学习 Grid 布局时，对 auto-fill 和 auto-fit 这两个关键字的存在疑惑，看完这篇文章后，就懂了。于是翻译出来，希望也能帮到大家。

在 Grid 布局中，使用 auto-fill 或 auto-fit 关键字，能帮你在一行中尽可能多的排列 Grid 项目。本教程将会解释这两个关键字的作用。

开始吧！

第一步：创建 HTML

打开代码编辑器
创建一个 HTML 文件，将下列代码粘贴进去

<div class="container">
   <div class="item item1">First</div>
   <div class="item item2">Second</div>       
   <div class="item item3">Third</div>      
   <div class="item item4">Fourth</div>       
   <div class="item item5">Fifth</div>       
   <div class="item item6">Sixth</div>
   <div class="item item7">Seventh</div>       
   <div class="item item8">Eighth</div>   
</div>

第二步：创建 CSS

创建一个 CSS 文件，在 HTML 中引入此文件
将下列样式添加到 CSS 文件中

/* 全局样式 */
* {
    box-sizing: border-box;
}
body {
    background-color: #AAA;
    margin: 50px;
}

/* 每个 Grid 项目中都包含一个数值 */
.item {   
    /* 居中显示 Grid 项目里的内容。每个 Grid 项目同时也是一个 Flex 容器 */
    display: flex;
    /* 水平垂直居中 */
    justify-content: center;
    align-items: center;
    border: 5px solid #87b5ff;
    border-radius: 3px;
    font-size: 2em;
    font-family: sans-serif;
    font-weight: bold;
    background-color: #1c57b5;
}

第三步：CSS Grid

创建包含 4 列的 Grid 容器。每列的宽度设置为 200px，列与行之间的间隔是 1.5rem（差不多是桌面屏幕里的 24px）。

/* CSS Grid 样式 */
.container {
   display: grid;
   grid-template-columns: repeat(4, 200px);
   grid-gap: 1.5rem;
}

可以看见，Grid 容器第一行里还有空间放置第五个 Grid 项目，但因为我们仅声明了四列，所以容器右边的额外空间就没被使用。

第四步：使用 auto-fill 和 auto-fit

编辑 CSS 代码：

.container {
   display: grid;
   grid-template-columns: repeat(auto-fill, 200px);
   grid-gap: 1.5rem;
}

Grid 容器的宽度足够装下 5 个项目，每个的宽度是 200px。

我们调整浏览器窗口的尺寸，让视口宽度变窄一些，比如 800px。

第四、第五个项目被折到下一行显示，因为现在的空间只够装得下 3 个项目的。下列是涉及到的一些数学运算：

3 列（每个 200px）= 600x

每列之间的间隙 = 24px * 2 = 48px

总共使用的空间 = 648px

视口宽度：800px

视口剩余空间：800px - 648px = 152px

第四个项目折到下一行显示，是因为剩余空间不足 200px 了，没有地方能装得下了。

再编辑一下 CSS 代码：

.container {
   display: grid;
   grid-template-columns: repeat(auto-fit, 200px);
   grid-gap: 1.5rem;
}

发现布局上没有任何改变。

为了展示 auto-fill 和 auto-fit 的不同点，我们将 7 个项目删减为 3 个。

<div class="container">
   <div class="item item1">First</div>
   <div class="item item2">Second</div>
   <div class="item item3">Third</div>
</div>

编辑 CSS 代码：

.container {
   display: grid;
   grid-template-columns: repeat(auto-fill, 200px);
   grid-gap: 1.5rem;
}

如果有剩余空间的话，auto-fill 会创建额外的空列。而 auto-fit 则以最后一个 Gird 项目结束 Gird 容器，不管是否还有额外的空间存在。

就是说，如果使用的是 auto-fill，你可以指定第三个项目跨两列，或者将 3 个项目里的任意一个放在最后一个单元格的位置。

你可能感觉这还是挺使实用的哦，但是确实没大用处。接着读，来看看这俩关键字的真正实力。

第五步：搭配 minmax() 使用 auto-full 和 auto-fit

CSS 提供的 minmax() 函数用于指定 Grid Track 的最小和最大尺寸。搭配 minmax() 使用 auto-full 和 auto-fit 能帮你创建一个具有响应式行为的网格系统。

编辑 CSS 代码：

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

auto-fill 关键字根据当前视口的宽度，分配了另外两个空列在右边。注意，这些列的尺寸不是固定的。

这些列被指定占据同样的宽度，列的宽度会基于 minmax() 函数中的参数进行调整。

现在调整视口的尺寸，让第三个项目折到下一行显示

再来看下 auto-fit 关键字的表现。

编辑 CSS 代码：

.container {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   grid-gap: 1.5rem;
}

发现三个项目占满了所有的可用空间。如果将视口尺寸调整到 524px 的话，会看到第 3 个项目会折到下一行显示。

下面列出了其中涉及到的一些数学运算：

2 列（每个 200px）= 400x —— minmax() 中指定的最小尺寸。

每列之间的间隙 = 24px

总共使用的空间 = 424px

body margin（在全局样式中设置） = 左右各 50px = 100px

视口宽度：524px

现在就有了一个具有响应式行为的网格系统，不需要写媒体查询或者给 Grid 项目添加额外的类名（像 Bootstrap 那样）。

现在知道 auto-fill 和 auto-fit 关键字在 Grid 布局中的作用了吧。它确实能帮助我们一个响应式的网格系统。

谢谢阅读！

这个系列之前的 12 篇文章：

（完）