如何使用CSS构建一个瀑布流布局

如何使用CSS构建一个瀑布流布局

瀑布流布局是一种常见的网页布局方式,其中元素以不同的大小排列,且行与列之间没有不均匀的间隙。在瀑布流布局中,即使某一行或列中的元素较短,下一个元素也会占据空间。

如何实现瀑布流布局

实现这一目标的方法有很多,但最好的方法就是使用grid-template-columnsrepeat()函数。

grid-template-columns 属性

除了明确的列大小之外,CSS Grid最有价值、最实用的功能之一就是重复列,直到列满为止,然后自动将项目放置其中。尤其是,我们可以在网格中指定所需的列数,然后让浏览器控制这些列的响应性,这样就能在视口尺寸较小的情况下显示较少的列,而在屏幕宽度增加时显示较多的列。

这可以通过使用 repeat() 函数和auto-placement属性来实现。简而言之,repeat()函数允许我们根据需要重复列。例如,如果我们要创建一个 12 列的网格,我们可以写如下代码:

.grid {display: grid;/* 定义网格列数 */grid-template-columns: repeat(12, 1fr);
}

我们使用1fr告诉浏览器将可用空间平均分配给每一列,使每一列获得相等的份额。也就是说,无论网格有多大,本例中的网格总是有 12 列。然而,这还不够好,因为在较小的视口中,内容会被挤压得太厉害。

因此,我们需要指定列的最小宽度,确保它们不会太窄。为此,我们可以使用minmax()函数。

grid-template-columns: repeat(12, minmax(300px, 1fr));

但由于CSS Grid的特性,该行会溢出。我们明确指示浏览器每行重复列 12 次,因此即使视口宽度太小,无法按照新的最小宽度要求全部容纳这些列,超出视窗范围的列也不会自动换行。

要实现换行,我们可以使用auto-fitauto-fill属性。

grid-template-columns: repeat(auto-fit, minmax(300px,1fr));

通过使用这些关键字,我们可以指示浏览器为我们处理元素换行和列的大小,使原本会溢出的元素自动换行。

这就是Grid现在的样子:
截屏2024-04-05 21 41 09

但这不是砌体布局。那么如何实现呢?让我们来看看。

grid-columngrid-row属性

grid-columngrid-row属性指定了grid item在网格布局中的大小和位置。因此,我们可以指定网格中单个grid item的宽度或高度。为此,我们可以使用span特性。

要增加第一个grid item的宽度,我们可以这样写:

.grid-item:nth-child(1) {grid-column: span 2;grid-row: span 1;
}

因此,第一个网格单元格将横跨两列,展示结果如下:
截屏2024-04-05 21 43 03

同理,如果要增加第二个grid item的高度,我们可以这样写:

.grid-item:nth-child(2) {grid-column: span 1;grid-row: span 2;
}

因此,第二个grid item将横跨两行,展示效果如下:
截屏2024-04-05 21 45 07

同样,如果我们以所需的方式处理每个grid item,就会得到以下结果:
截屏2024-04-05 21 47 56

但是,如果grid item的数量过多,就无法为每个grid item指定精确的高度和宽度。因此,我们可以动态分配这些值:


.grid-item: nth-child(7n+1) {grid-column: span 2;grid-row: span 1;
}.grid-item: nth-child(7n+2) {grid-column: span 1;grid-row: span 2;
}.grid-item: nth-child(7n+4) {grid-column: span 1;grid-row: span 2;
}.grid-item: nth-child(7n+5) {grid-column: span 3;grid-row: span 1;
}

最终效果如下:
截屏2024-04-05 21 47 56

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/795854.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

多线程下载图片等待图片下载完代码实现

Future 实现方式 import java.io.IOException; import java.net.URL; import java.util.ArrayList; import java.util.List; import java.util.concurrent.Callable; import java.util.concurrent.ExecutionException; import java.util.concurrent.ExecutorServic…

java框架学习——反射概述及简易版框架搭建

前言: 整理下学习笔记,打好基础,daydayup!!! 反射 反射(Reflection):加载类,并允许以编程的方式解剖类中的各种成分(成员变量,方法,构造器等) 1&…

C++之类和对象(上)

目录 1.面向过程和面向对象初步认识 2.类的引入 3.类的定义 4.类的访问限定符及封装 4.1访问限定符 4.2 类的两种定义方式 第一种: 第二种: 4.3封装 5.类的实例化 6.类对象模型 1.面向过程和面向对象初步认识 C语言是面向过程的,…

【ARM 嵌入式 C 文件操作系列 20 -- 文件删除函数 remove 详细介绍】

请阅读【嵌入式开发学习必备专栏 】 文章目录 文件删除函数 remove 文件删除函数 remove 在 C 语言中, 可以使用 remove 函数来删除一个文件,但在删除之前 可能想确认该文件是否存在。 可以使用 stat 函数来检查文件是否存在。 以下是如何实现这个功能…

出门一笑, “栈” 落江横 (Java篇)

本篇会加入个人的所谓‘鱼式疯言’ ❤️❤️❤️鱼式疯言:❤️❤️❤️此疯言非彼疯言 而是理解过并总结出来通俗易懂的大白话, 小编会尽可能的在每个概念后插入鱼式疯言,帮助大家理解的. 🤭🤭🤭可能说的不是那么严谨.但小编初心是能让更多人…

03-自媒体文章发布

自媒体文章发布 1)自媒体前后端搭建 1.1)后台搭建 ①:资料中找到heima-leadnews-wemedia.zip解压 拷贝到heima-leadnews-service工程下,并指定子模块 执行leadnews-wemedia.sql脚本 添加对应的nacos配置 spring:datasource:driver-class-name: com…

23年蓝桥杯省赛 动态规划DP

动态规划 就是:给定一个问题,我们把它拆成一个个子问题,直到子问可以直接解决。然后把子问题的答案保存起来,以减少重量计算,再根据子问题答察反推,得出问解的一种方法。 题目: 这天,一只蜗牛…

QT串口接收数据并进行波形显示(含源码)

**使用QT在串口调试助手基础上实现波形显示(含源码) 评论比较多留言需要源码的,逐个发邮箱比较麻烦也不能及时回复,现将源码上传至链接(无需积分下载)https://download.csdn.net/download/m0_51294753/877…

mysql 8.0 常用函数大全总结,并列出实例

MySQL 8.0提供了丰富的内置函数,这些函数可以大致分为几个类别:字符串函数、数值函数、日期和时间函数、比较函数、逻辑函数、控制流函数等。以下是20个常用的MySQL函数及其简单的使用示例: 1. **CONCAT()**: 字符串连接函数。 - 示例&am…

设计一个可扩展的Python Web框架:并发、性能与安全性考量

设计一个可扩展的Python Web框架:并发、性能与安全性考量 一、引言 随着Web应用的日益复杂和需求的不断增长,一个可扩展的Web框架变得至关重要。在Python生态系统中,虽然存在诸多优秀的Web框架,但设计一个符合自身需求且具备高度…

云服务器4m带宽是什么意思?

云服务器配置4M带宽是什么意思?4M代表该台云服务器的网络传输速度为4Mbps,一般指该台云服务器的公网出方向带宽,即从云服务器下载的公网带宽,4M带宽下载速度为512KB/秒,云服务器吧yunfuwuqiba.com整理常见的云服务器公…

Java之过滤器Filter、拦截器Interceptor与面向切面AOP

Java之过滤器Filter、拦截器Interceptor与面向切面AOP Filter的使用 Component WebFilter(urlPatterns {"/*"}) public class CustomFilter implements Filter {Overridepublic void doFilter(ServletRequest request, ServletResponse response, FilterChain cha…

cJSON(API的详细使用教程)

我们今天来学习一般嵌入式的必备库,JSON库 1,json和cJSON 那什么是JSON什么是cJSON,他们之间有什么样的关联呢,让我们一起来探究一下吧。 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式&…

C和C++内存管理

目录: 一:C和C内存分布 二:C动态内存管理方式 三:C动态内存管理方式 四:operator new与operator delete函数 五:new和delete的实现原理 六:定位new表达式(placement-new) 七&#xff1…

使用YOLOv8训练自己的【目标检测】数据集

文章目录 1.收集数据集1.1 使用开源已标记数据集1.2 爬取网络图像1.3 自己拍摄数据集1.4 使用数据增强生成数据集1.5 使用算法合成图像 2.标注数据集2.1确认标注格式2.2 开始标注 3.划分数据集4.配置训练环境4.1获取代码4.2安装环境 5.训练模型5.1新建一个数据集yaml文件5.2预测…

了解IP地址的基本概念和修改步骤

在数字化时代,IP地址作为网络设备的唯一标识,其重要性不言而喻。无论是为了提升网络性能,还是出于隐私保护的需求,修改IP地址都是网络使用者可能遇到的操作。虎观代理将详细介绍如何修改IP地址,并探讨在修改过程中需要…

python+flask+django文献文件资料搜索系统

后端:python 前端:vue.jselementui 框架:django/flask Python版本:python3.7 数据库:mysql 数据库工具:Navicat 开发软件:PyCharm 本系统在设计过程中,很好地发挥了该开发方式的优…

刷题DAY45 | 70-爬楼梯(进阶) LeetCode 322-零钱兑换 279-完全平方数

70 爬楼梯&#xff08;进阶&#xff09; 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬至多m (1 < m < n)个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff1f; 注意&#xff1a;给定 n 是一个正整数。 输入描述 输入共一行&#xff0c;包含两个正整数&…

120.单例模式(C++设计模式)

一、什么是单例模式 单例模式是一种创建型设计模式&#xff0c;用于确保一个类只有一个实例&#xff0c;并提供一个全局访问点来获取这个实例。 在C中实现单例模式通常会遵循以下步骤&#xff1a; 私有构造函数&#xff1a;确保单例类的构造函数是私有的&#xff0c;这样外部就…

例47:键盘事件演示

建立一个EXE工程&#xff0c;在默认窗体上放一个Image框和一一个text框。在text的按键事件中输入代码&#xff1a; Function Form1_Text1_WM_KeyDown(hWndForm As hWnd, hWndControl As hWnd,nVirtKey As Long, lKeyData As Long) As LongIf nVirtKey VK_SPACE ThenImage1.Pi…