1. 微擎百科首页
  2. 开发学习

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

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

设置

下面是我们初始化网格的外观:

2019112906210299

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 网格布局没有任何影响

通过display属性设置属性值为gridinline-grid可以创建一个网格容器。网格容器中的所有子元素就会自动变成网格项目(grid item)。

通过grid-template-columns指定的每个值来创建每列的列宽。

div4div5div6放置在新的一行(第二行),因为grid-template-columns只定义了三列的大小,它们也分别放置在列1、列2和列3;其中列1、列2和列3的尺寸大小等于div1div2div3宽度。

grid-template-rows指定的每个值可以创建每行的高度。行高的尺寸可以是任何非负值,长度可以是px%em等长度单位的值。

div1div2具有固定的高,分别为50px50px

因为只定义了两个行的高度值,所以其余div的高度是根据其自身的内容来定义。

基础响应单位: 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。

2019112906360464

高级响应

然而,上面列子并没有给出我们想要的响应性,因为网格总是三列宽。我们希望网格能根据容器的宽度改变列的数量。要做到这一点,你必须学习如下三个概念:

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);
}

效果如下:

640

现在,栅格将会根据容器的宽度调整其数量。它会尝试在容器中容纳尽可能多的 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 代码中

效果如下:

640-(1)

添加图片

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

我们在每个网格中添加一个图片标签:

<div><img src="img/forest.jpg"/></div>
为了使图片适应于每个条目,我们将其宽、高设置为与条目本身一样,然后使用object-fit:cover,
这将使图片覆盖它的整个容器,根据需要,浏览器将会对其进行裁剪。
.container > div > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

效果如下:

640-(2)

ok!以上就是有关 CSS Grid 的介绍,目前浏览器支持情况,IE10+,谷歌,火狐,safari,opera高版本都支持该属性。

2019112907045333

作者:icepy @知乎专栏
https://zhuanlan.zhihu.com/p/69809343

本文来自投稿,不代表微擎百科立场,如若转载,请注明出处:https://www.w7.wiki/develop/2809.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论列表(1条)