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

原文地址: https://medium.com/free-code-...

原文做者: Per Harald Borgen

翻译做者: hanxiansen

在这篇文章中，我将教你如何使用 CSS Grid 来建立一个超酷的图像网格图，它将根据屏幕的宽度来改变列的数量。最精彩的地方在于：全部的响应特性被添加到了一行 css 代码中。这意味着咱们没必要将 HTML 与丑陋的类名(如col-sm-4, col-md-8)混杂在一块儿，也没必要为每一个屏幕建立媒体查询。ok，让咱们发车吧。

设置

在本文中，我将继续使用我在第一篇 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 网格布局没有任何影响

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

让咱们让列开始具备自适应特性吧。

基础响应单位: fraction

CSS 栅格布局带来了一个全新的值:fraction单位，fraction单位一般简写为fr，它容许你根据须要将容器拆分为多个块。

让咱们将每一列更改成一个 fraction 单位宽:

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

结果是栅格布局将会把整个宽度分红三个 fraction，每列占据一个 fraction 单位，效果以下：

若是咱们将grid-template-columns的值更改成1fr 2fr 1fr，第二列的宽度将会是其它两列的两倍。总宽如今是四个 fraction 单位，第二列占据两个 fraction 单位，其它列各占一个 fraction。效果以下：

总的来讲，fraction 单位值将使你能够很容易的更改列的宽度。

高级响应

然而，上面列子并无给出咱们想要的响应性，由于网格老是三列宽。咱们但愿网格能根据容器的宽度改变列的数量。要作到这一点，你必须学习以下三个概念：

repeat()

首先咱们学习repeat()函数。这是一个强大的指定列和行的方法。让咱们使用repeat()函数来更改网格:

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

在上面代码中，repeat(3, 100px)等于100px 100px 100px。第一个参数指定行与列的数量，第二个参数指定它们的宽度，所以它将为咱们提供与开始时彻底相同的布局：

auto-fit

而后是auto-fit。让咱们跳过固定数量的列，将3替换为自适应数量：

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

效果以下:

如今，栅格将会根据容器的宽度调整其数量。它会尝试在容器中容纳尽量多的 100px 宽的列。但若是咱们将全部列硬写为 100px，咱们将永远无法得到所需的弹性，由于它们很难填充整个宽度。正如你在上图看到的，网格一般在右侧留有空白。

minmax()

为了解决上述问题，咱们须要minmax()。咱们将 100px 替换为 minmax(100px, 1fr)，代码以下：

.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。但若是有更多的可用空间，栅格布局将简单地将其均分给每列，由于这些列变成了 fraction 单位，而不是 100px。

添加图片

最后一步是添加图片。这与 CSS Grid 布局无关，但让咱们看下代码。

咱们在每一个网格中添加一个图片标签：

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

为了使图片适应于每一个条目，咱们将其宽、高设置为与条目自己同样，咱们使用object-fit:cover。这将使图片覆盖它的整个容器，根据须要，浏览器将会对其进行裁剪。

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

效果以下：

ok！如今你已经了解了 CSS Grid 布局中最复杂的概念之一了，请给本身一个赞吧。

浏览器兼容性

在结束本文前，我提下浏览器支持状况，在撰写本文时，全球77%的网站将支持 CSS Grid，并且比例还在逐步攀升。

我想一想2018将是 CSS 网格布局的元年。它将得到突破，并成为前端开发者的必备技能，就像过去几年 CSS Flexbox 布局发生的状况同样。