如何通过添加一行 CSS 让你的 HTML 实现响应式

摄影：TJ Holowaychuk

在本文中，我将教您如何使用 CSS Grid 创建一个超酷的图像网格，该网格的列数会随着屏幕的宽度而变化。

最美妙的部分是：响应能力仅需一行 CSS 即可添加。

这意味着我们不必用丑陋的类名（即）弄乱 HTMLcol-sm-4或col-md-8为每种屏幕尺寸创建媒体查询。

我还创建了一个免费的 CSS Grid 课程。点击此处即可访问。

单击图像即可进入课程。

现在让我们开始吧！

设置

在本文中，我们将继续使用我在第一篇 CSS Grid 文章中使用的网格。然后，我们将在文章末尾添加图片。我们的初始网格如下所示：

这是 HTML：

<div class="container">  
  <div>1</div>  
  <div>2</div>  
  <div>3</div>  
  <div>4</div>  
  <div>5</div>  
  <div>6</div>  
</div>

CSS：

.container {  
    display: grid;  
    grid-template-columns: 100px 100px 100px;  
    grid-template-rows: 50px 50px;  
}

注意：该示例还包含一些基本样式，但我不会在这里详细介绍，因为它与 CSS Grid 无关。

如果这段代码让您感到困惑，我建议您阅读我的“5 分钟学习 CSS 网格”文章，其中我解释了布局模块的基础知识。

让我们首先让列具有响应性。

分数单位的基本响应能力

CSS 网格带来了一个全新的值，称为“分数单位”。分数单位的写法类似于fr，它允许你将容器拆分成任意数量的分数。

我们将每列的宽度改为一个分数单位。

.container {  
    display: grid;  
    grid-template-columns: 1fr 1fr 1fr;  
    grid-template-rows: 50px 50px;  
}

这里发生的情况是，网格将整个宽度分成三部分，每列占一个单位。结果如下：

如果我们将grid-template-columns值改为1fr 2fr 1fr，第二列的宽度将是其他两列的两倍。总宽度现在是四个分数单位，第二列占用其中两个，其他列各占用一个。如下所示：

换句话说，分数单位值使您可以非常轻松地更改列的宽度。

先进的响应能力

然而，上面的示例并没有提供我们想要的响应式布局，因为这个网格总是三列宽。我们希望网格的列数能够随着容器的宽度而变化。为了实现这一点，你需要学习三个新的概念。

重复（）

我们先从repeat()函数开始。这是一种更强大的指定行和列的方法。让我们以原始网格为例，将其更改为使用 repeat()：

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

换句话说，repeat(3, 100px)与 相同100px 100px 100px。第一个参数指定所需的列数或行数，第二个参数指定它们的宽度，因此这将为我们提供与我们开始时完全相同的布局：

自动适应

然后是自动调整。我们跳过固定列数，而是将 3 替换为auto-fit。

.container {  
    display: grid;  
    grid-gap: 5px;  
    grid-template-columns: repeat(auto-fit, 100px);
    grid-template-rows: repeat(2, 100px);  
}

这会导致以下行为：

现在，网格的列数会随着容器的宽度而变化。

它只是尝试将尽可能多的 100px 宽的列放入容器中。

然而，如果我们将所有列的宽度硬编码为 100px，我们永远无法获得所需的灵活性，因为它们的宽度加起来很少能达到全宽。正如你在上面的 gif 中看到的，网格经常在右侧留下空白。

minmax()

为了解决这个问题，我们需要的最后一项是minmax()。我们只需将 100px 替换为minmax(100px, 1fr)。这是最终的 CSS。

.container {  
    display: grid;  
    grid-gap: 5px;  
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-template-rows: repeat(2, 100px);  
}

请注意，所有响应都发生在一行 CSS 中。

这会导致以下行为：

正如你所见，它完美地运行了。该minmax()函数定义了一个大于或等于min且小于或等于 max 的尺寸范围。

因此，列宽现在至少为 100px。但是，如果有更多可用空间，网格会将其平均分配给每列，因为列宽变成了分数单位，而不是 100px。

添加图像

现在最后一步是添加图片。这与 CSS Grid 无关，但我们还是来看一下代码。

我们首先在每个网格项内添加一个图像标签。

<div><img src="img/forest.jpg"/></div>

为了使图像适合项目，我们将其设置为与项目本身一样宽和高，然后使用object-fit: cover;。这将使图像覆盖其整个容器，并且浏览器会在需要时对其进行裁剪。

.container > div > img {  
    width: 100%;  
    height: 100%;  
    object-fit: cover;  
}

最终结果如下：

就这样！现在你了解了 CSS Grid 中最复杂的概念之一，所以给自己一点鼓励吧。

浏览器支持

在结束之前，我还需要提一下浏览器支持情况。在撰写本文时，全球 92% 的网站流量都支持 CSS Grid 布局。

我相信 CSS Grid 是未来前端开发人员必备的技能。就像过去几年 CSS Flexbox 的发展一样。

因此，如果您有兴趣正确学习该主题，请查看我的CSS Grid 课程。

感谢阅读！我叫 Per，是Scrimba的联合创始人，Scrimba 是一款用于创建交互式编程截屏视频的工具。如果您想与我保持联系，请在Twitter和Instagram上关注我。