[译]CSS Grid #13：auto-fill 和 auto-fit 关键字

时间 2019-12-02

标签 css grid auto fit 关键字栏目 CSS 繁體版

原文原文链接

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

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

在 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）。ide

/* 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。学习

第4、第五个项目被折到下一行显示，由于如今的空间只够装得下 3 个项目的。下列是涉及到的一些数学运算：flex

3 列（每一个 200px）= 600xui

每列之间的间隙 = 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 篇文章：

（完）