一行 CSS 代码搞定响应式布局

收藏自

Per Harald Borgen（作者）
https://medium.co...... （原文地址）

设置

对于本文，我们将继续在第一篇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无关。

如果这段代码让你感到困惑，我建议你去好好读下我的这篇文章Learn CSS Grid in 5 minutes ，其中就详细的解释了布局的基础知识。

让我们让列开始具有自适应特性吧。

分数单位的基本响应

CSS Grid带来了一个全新的值，称为分数单位。分数单位的写法类似于fr，它允许您将容器拆分为所需的任意分数。让我们将每一列更改为一个小数单位宽度。

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

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

如果将grid-template-columns值更改为1fr 2fr 1fr，则第二列的宽度现在将是其他两列的两倍。现在，总宽度为四个小数单位，第二个占两个，而其他每个占一个。看起来是这样的：

换句话说，分数单位值使您更容易更改列的宽度。

高级响应

但是，上面的示例并未提供我们想要的响应能力，因为此网格将始终为三列宽。我们希望我们的网格根据容器的宽度来改变列数。为此，您必须学习三个新概念。

repeat（）

我们将从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。但是，如果有更多可用空间，则网格将简单地将其平均分配到每个列，因为列变为小数单位而不是100 px。

添加图像

现在，最后一步是添加图像。这与CSS Grid无关，但让我们继续看一下代码。

我们将从在每个网格项目内添加图像标签开始。

 <div> <img src =“ img / forest.jpg” /> </ div>

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

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

最终如下所示：

就是这样！您现在知道CSS Grid中最复杂的概念之一

浏览器支持

在结束之前，我还需要提及浏览器支持。在撰写本文时，全球网站流量的77％支持CSS Grid，并且还在不断攀升。我相信2018年将是CSS Grid的一年。它将会取得突破，并将成为前端开发人员的必备技能。就像最近几年CSS Flexbox发生的事情一样。或者，查看课程的预览。