如何使用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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

MacOS Docker 可视化面板 Portainer

一、简介 Portainer 是一个可视化的容器镜像图形管理工具,使用 Portainer 可以轻松构建、管理和维护Docker 环境。 而且完全免费(portainer-ce 是免费的,portainer-ee 是需要授权的,今天安装的是 portainer-ce 版本)&…

Chatgpt掘金之旅—有爱AI商业实战篇|社交媒体管理|(七)

演示站点: https://ai.uaai.cn 对话模块 官方论坛: www.jingyuai.com 京娱AI 一、AI技术社交媒体创业有哪些机会? 人工智能(AI)技术作为当今科技创新的前沿领域,为创业者提供了广阔的机会和挑战。随着AI技…

如何注册midjourney账号

注册Midjourney账号比较简单,准备好上网工具,进入官网 Midjourney访问地址: https://www.midjourney.com/ 目前没有免费使用额度了,会员最低 10 美元/月,一般建议使用30美元/月的订阅方案。了解如何订阅可以查看订阅…

设计模式——组合模式08

组合模式:把类似对象或方法组合成结构为树状的设计思路。 例如部门之间的关系。 设计模式,一定要敲代码理解 抽象组件 /*** author ggbond* date 2024年04月06日 08:54* 部门有:二级部门(下面管三级部门) 三级部门 &a…

马林思维个人总结--情绪模型/方法论

马林思维一些观点总结,出于个人归纳,认为对自己有用的就整理起来。持续更新中。 文章目录 一、价值点1: 情绪-思维-行为 模型---情绪为王,这个世界是非理性的1. 情绪才是最本质的东西, 情绪决定思维,思维决…

【Canvas与艺术】绘制灰色橄榄枝环绕“Premium Quality”徽章

【关键点】 利用复数计算出树叶的控制点&#xff0c;用二次贝塞尔曲线勾画树叶。 【成果图】 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head&…

海外语言任务商城源码 海外仓库系统及商城系统

海外语言任务商城源码 海外仓库系统及商城系统 自带利息宝理财活动文本搭建教程 搭建简单&#xff0c;前台是单语言的。 源码下载&#xff1a;https://download.csdn.net/download/m0_66047725/89013345 更多资源下载&#xff1a;关注我。

【.Net】DotNetty

文章目录 概述NIO和BIO、AIODotNetty适用场景DotNetty的整体架构和模块DotNetty的使用示例来源 概述 本系列文章主要讲述由微软Azure团队研发的.net的版本的netty&#xff0c;Dotnetty。所有的开发都将基于.net core 3.1版本进行开发。 Dotnetty是什么&#xff0c;原本Netty是…

wordpress全站开发指南-面向开发者及深度用户(全中文实操)--wordpress中的著名循环

wordpress中的著名循环 首先&#xff0c;在深入研究任何代码之前&#xff0c;我们首先要确保我们有不止一篇博客文章可以工作。因此&#xff0c;我们要去自己的wordpress站点&#xff0c;从侧边栏单机Posts(文章)&#xff0c;进行创建 在执行代码的时候会优先执行single.php如…

第四百四十二回 再谈flutter_launcher_icons包

文章目录 1. 概念介绍2. 使用方法3. 示例代码4. 经验与总结4.1 经验分享4.2 内容总结 我们在上一章回中介绍了"overlay_tooltip简介"相关的内容&#xff0c;本章回中将 再谈flutter_launcher_icons包.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 …

sqlmap(四)案例

一、注入DB2 http://124.70.71.251:49431/new_list.php?id1 这是墨者学院里的靶机&#xff0c;地址&#xff1a;https://www.mozhe.cn/ 1.1 测试数据库类型 python sqlmap.py -u "http://124.70.71.251:49431/new_list.php?id1" 1.2 测试用户权限类型 查询选…

WCH恒沁单片机-CH32V307学习记录2----FreeRTOS移植

RISC-V 单片机 FreeRTOS 移植 前面用了 5 篇博客详细介绍了 FreeRTOS 在 ARM Cortex-M3 MCU 上是如何运行的。 FreeRTOS从代码层面进行原理分析系列 现在我直接用之前的 RISC-V MCU 开发板子&#xff08;CH32V307VCT6&#xff09;再次对 FreeRTOS 进行移植&#xff0c;其实也…

深度学习理论基础(六)Transformer多头注意力机制

目录 一、自定义多头注意力机制1. 缩放点积注意力&#xff08;Scaled Dot-Product Attention&#xff09;● 计算公式● 原理 2. 多头注意力机制框图● 具体代码 二、pytorch中的子注意力机制模块 深度学习中的注意力机制&#xff08;Attention Mechanism&#xff09;是一种模仿…

html骨架以及常见标签

推荐一个网站mdn。 html语法 双标签&#xff1a;<标签 属性"属性值">内容</标签> 属性&#xff1a;给标签提供附加信息。大多数属性以键值对的形式存在。如果属性名和属性值一样&#xff0c;可以致谢属性值。 单标签&#xff1a;<标签 属性"属…

【JavaWeb】Day33.MySQL概述

什么是数据库 数据库&#xff1a;英文为 DataBase&#xff0c;简称DB&#xff0c;它是存储和管理数据的仓库。 像我们日常访问的电商网站京东&#xff0c;企业内部的管理系统OA、ERP、CRM这类的系统&#xff0c;以及大家每天都会刷的头条、抖音类的app&#xff0c;那这些大家所…

Python | Leetcode Python题解之第13题罗马数字转整数

题目&#xff1a; 题解&#xff1a; class Solution:SYMBOL_VALUES {I: 1,V: 5,X: 10,L: 50,C: 100,D: 500,M: 1000,}def romanToInt(self, s: str) -> int:ans 0n len(s)for i, ch in enumerate(s):value Solution.SYMBOL_VALUES[ch]if i < n - 1 and value < S…

.NET8 和 Vue.js 的前后端分离

在.NET 8中实现前后端分离主要涉及到两个部分&#xff1a;后端API的开发和前端应用的开发。后端API通常使用ASP.NET Core来构建&#xff0c;而前端应用则可以使用任何前端框架或技术栈&#xff0c;比如Vue.js、React或Angular等。下面是一个简化的步骤指南&#xff0c;帮助你在…

物联网系统设计 8

1 规划中小型LoRa 中小型分时复用&#xff0c;大型项目需要学习LoRaWAN 1.1 通信记录 1.2 节点能耗 1278芯片 满功率20DMB&#xff0c;增加PA&#xff0c;发送功率 30 DBM 内置天线柔性 棒状 3db 203 休眠、发生、接收 计算链路预算&#xff0c;工作电流&#xff0c;工…

Node.JS多线程PromisePool之promise-pool库实现

什么是Promise Pool Map-like, concurrent promise processing for Node.js. Promise-Pool是一个用于管理并发请求的JavaScript库&#xff0c;它可以限制同时进行的请求数量&#xff0c;以避免过多的请求导致服务器压力过大。使用Promise-Pool可以方便地实现对多个异步操作的并…

Mysql中的 IFNULL 函数的详解

Mysql中的 IFNULL 函数的详解 概念 在mysql中IFNULL() 函数用于判断第一个表达式是否为 NULL&#xff0c;如果第一个值不为NULL就执行第一个值。第一个值为 NULL 则返回第二个参数的值。 语法 IFNULL(a, b)Demo 举例说明 创建表 create table student_one( sno varchar(20)…