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

设置

在本文中,我将使用网格布局。然后,我们将在文章末尾添加图片。下面是我们初始化网格的外观

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

基础响应单位: 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,而且比例还在逐步攀升。

一行css代码搞定响应式布局的更多相关文章

  1. CSS:使用CSS媒体查询创建响应式布局

    现如今在Web前端领域,BootStrap是一个最流行的UI库,其12列的栅栏系统为响应式布局提供了一种对程序员来说很好操作的模式. 追究Bootstrap的内在原理,其实就是通过媒体查询来完成对不同 ...

  2. 【css】如何实现响应式布局

    “自适应网页设计”到底是怎么做到的?其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name="viewport" content=&qu ...

  3. 一行python代码搞定文件分享

    给同事分享文件,如你所知通过聊天工具,网盘或linux命令各种方法,还有一个也可以尝试下:使用一行python代码快速搭建一个http服务器在局域网内进行下载. python3使用: python3 ...

  4. 一行 Python 代码搞定一棵树

    使用 Python 内建的 defaultdict 方法可以轻松定义一个树的数据结构. 简单的说树也可以是一个字典数据结构           Python   1 def tree(): retur ...

  5. CSS响应式布局到底是什么?

    响应式布局是最近几年在前端开发中非常火热的词,它是相对于固定像素大小的网页而言的,那么CSS响应式布局到底是什么?顾名思义,响应式布局就是网页能够响应各种各样不同分辨率大小的设备,能够将网页很好的呈献 ...

  6. CSS实现响应式布局

    用CSS实现响应式布局 响应式布局感觉很高大上,很难,但实际上只用CSS也能实现响应式布局要用的就是CSS中的没接查询,下面就介绍一下怎么运用: 使用@media 的三种方法 1.直接在CSS文件中使 ...

  7. CSS3---媒体查询与响应式布局

    1. 值 设备类型 All 所有设备 Braille 盲人用点字法触觉回馈设备 Embossed 盲文打印机 Handheld 便携设备 Print 打印用纸或打印预览视图 Projection 各种 ...

  8. Bootstrap工具包--用于响应式布局和移动设备优先的web项目

    Bootstrap是用于前端开发的工具包,是一个css/html框架 用于响应式布局和移动设备优先的web项目 响应式布局--一个网站能兼容多个终端 有很多版本:v3,v4,v5   三个没啥区别  ...

  9. vue项目 一行js代码搞定点击图片放大缩小

    一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...

随机推荐

  1. Angular中使用ECharts图表

    1.安装: npm install echarts --save 2.在 TypeScript 文件中导入echarts import * as echarts from 'echarts'; 3.根 ...

  2. Dart 变量、常量和命名规则

    /* Dart 变量: dart是一个强大的脚本类语言,可以不预先定义变量类型 ,自动会类型推导 dart中定义变量可以通过var关键字可以通过类型来申明变量 如: var str='this is ...

  3. 003-结构型-02-装饰模式(Decorator)

    一.概述 装饰( Decorator )模式又叫做包装模式.通过一种对客户端透明的方式来扩展对象的功能,是继承关系的一个替换方案.他是23种设计模式之一,英文叫Decorator Pattern,又叫 ...

  4. 安卓终端-Termux

    Termux是一个 Android 终端模拟器以及提供 Linux 环境的应用程序.跟许多其他应用程序不同,无需 root 设备也无需进行设置.它是开箱即用的!它会自动安装好一个最基本的 Linux ...

  5. QDateTime获取当前时间的时间戳

    QdateTime获取当前时间的时间戳作为图片名 QDateTime qdt1 = QDateTime::currentDateTime();QString timeStr = qdt1.toStri ...

  6. Qt编写自定义控件69-代码行数统计

    一.前言 代码行数统计主要用来统计项目中的所有文件的代码行数,其中包括空行.注释行.代码行,可以指定过滤拓展名,比如只想统计.cpp的文件,也可以指定文件或者指定目录进行统计.写完这个工具第一件事情就 ...

  7. [转]Connecting To SQLite Database Using Node.js

    原文链接:http://www.sqlitetutorial.net/sqlite-nodejs/connect/

  8. JS的正则表达式限定开始和结尾等测试

    []:匹配该区间内人任意一个字符^:匹配以某内容开头的$:匹配以模拟内容结尾的字符\w:测试是英文字母,数字,下划线.{}:设置区间,可出现几次到几次该文学习和测试几个正则的方法,测试结果如图,不加多 ...

  9. canvas《砸肉蛋》

    计划今年要自己写几个游戏的demo,先从<砸地鼠>这种简单的入手. 游戏思路 卡通化前端组头像 两种状态(快乐&被砸) 游戏时间1分钟 微信接口,分享最终得分 游戏规则 前端组的肉 ...

  10. DB2 索引(2)

    最近研究了一点DB2索引相关的东西,做一个总结: (1)在作为主键的列上,强制该列的唯一性和组织表中数据的排列结构: (2)在经常用连接的列(join)上建索引,这些列主要是一些外键,可以加快连接的速 ...