CSS 核心知识点 - grid

思维导图

参考网址: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_grid_layout

一、什么是 grid?

        CSS Grid布局是在CSS3规范中引入的一种新的布局方式,旨在解决传统布局方法(如浮动、定位、表格布局)存在的许多问题。CSS Grid布局规范最早由W3C提出,经过多年的发展和标准化,于2017年成为W3C的推荐标准。

二、grid 布局相比 flex 布局有那些方便之处?

Html + Css 核心知识 - flex (超详细)_html flex-CSDN博客

网格布局更为方便

问题场景一:例如想要实现页面内显示多个元素、每个元素大小尺寸间距相同、每行显示个数固定、按行由左向右排序、且在页面中均匀分布。如下所示

这时候很多人第一时间想到了 flex、单行用flex很方便、多行的话需要进行一些额外运算

.father{height: 80vh;width: 80vw;background-color: #f5f5f5;display: flex;flex-wrap: wrap;align-content: start;gap: 10px;}  .son{width: calc((100% - 50px) / 6);aspect-ratio: 1 / 1; /* 设置宽高比为1:1 */border: 1px solid red;box-sizing: border-box;}

那有没有不用计算的方案呢! grid 这时候就排上的用场了!

.father{height: 80vh;width: 80vw;background-color: #f5f5f5;display: grid;/* grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; */grid-template-columns: repeat(6, 1fr); /* 定义六个等宽的列 */align-content: start;gap: 10px;}  .son{/* width: calc((100% - 50px) / 6); */aspect-ratio: 1 / 1; /* 设置宽高比为1:1 */border: 1px solid red;box-sizing: border-box;}

问题场景二、实现等比例大小不同盒子布局、场景如下

这时候用其他方案处理就比较麻烦了、而 grid 就能很方便处理

.father{height: 80vh;width: 80vw;background-color: #f5f5f5;display: grid;/* grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; */grid-template-columns: repeat(6, 1fr); /* 定义六个等宽的列 */align-content: start;gap: 10px;}  .son{/* width: calc((100% - 50px) / 6); */aspect-ratio: 1 / 1; /* 设置宽高比为1:1 */border: 1px solid red;box-sizing: border-box;min-width: 200px;}#item1{grid-column: 1/3;grid-row: 1/3; }#item8{grid-column: 5/7;grid-row: 2/4; }

根据可用空间自动填充列(这点个人觉得非常好用)。

.father{height: 80vh;width: 80vw;background-color: #f5f5f5;display: grid;/* grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; */grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));align-content: start;gap: 10px;}  .son{/* width: calc((100% - 50px) / 6); */aspect-ratio: 1 / 1; /* 设置宽高比为1:1 */border: 1px solid red;box-sizing: border-box;}

可以看到宽度是被自动填充到333px

填充到了 359px

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

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

相关文章

DataWhale-吃瓜教程学习笔记(四)

学习视频:第3章-二分类线性判别分析_哔哩哔哩_bilibili 西瓜书对应章节: 3.4 文章目录 - 算法原理- 损失函数推导-- 异类样本中心尽可能远-- 同类样本方差尽可能小-- 综合 知识点补充 - 二范数二范数(2-norm)详解定义几何意义性质…

OpenHarmony开发实战:HDF驱动开发流程

概述 HDF(Hardware Driver Foundation)驱动框架,为驱动开发者提供驱动框架能力,包括驱动加载、驱动服务管理、驱动消息机制和配置管理。并以组件化驱动模型作为核心设计思路,让驱动开发和部署更加规范,旨在…

四川赤橙宏海商务信息咨询有限公司抖音开店靠谱吗?

在数字化浪潮席卷全球的今天,电商行业正以前所未有的速度发展。而在这个大潮中,四川赤橙宏海商务信息咨询有限公司凭借其专业的团队和前瞻性的战略眼光,专注于抖音电商服务,为广大商家提供了一站式解决方案,成为了行业…

Ubuntu20.04安装LibTorch并完成高斯溅射环境搭建

0. 简介 最近受到优刻得的使用邀请,正好解决了我在大模型和自动驾驶行业对GPU的使用需求。UCloud云计算旗下的Compshare的GPU算力云平台。他们提供高性价比的4090 GPU,按时收费每卡2.6元,月卡只需要1.7元每小时,并附带200G的免费…

接口自动化测试-项目实战

什么是接口自动化测试:使用工具或代码代替人对接口进行测试 测试项目结构(python包) 1、接口api包 2、script:业务脚本 3、data:数据 4、config.py :配置文件 5、reporter:报告 错误问题: 1、未打印任何东西。添加pip ins…

C语言 指针——缓冲区溢出与缓冲区溢出攻击

目录 缓冲区溢出攻击 缓冲区溢出攻击实例 字符串的安全输入方法​编辑 防止缓冲区溢出的两个要点 缓冲区溢出攻击 网络黑客常针对系统和程序自身存在的漏洞,编写相应的攻击程序  对缓冲区溢出漏洞的攻击 —— 最常见  几乎占到了网络攻击次数的一半以上…

Android (已解决)Gradle 编译失败 Unsupported class file major version 61

文章目录 一、报错原因二、解决方法 一、报错原因 新版本的 Android Studio 默认使用的是 Java 17 LTS,而这个历史项目的 Gradle 版本很低,不支持高版本的 Java。 具体原因:Java 17 (major version 61) 编译的 class 文件,如果在…

DevEco Studio有时会多出来.js和.map文件,导致项目不能运行

1、问题 在使用DevEco的时候有时候会出现啥都没干,但是在项目的目录下会自动生成和文件同名的.js和.js.map文件,至于为什么会生成目前我也不知道,如果想要更深了解可以到论坛讨论:华为开发者论坛。生成.js和.js.map文件优…

Terraform基础概念一

Terraform基础概念一 1.Infrastructure-as-Code(IaC)概念1.1 IaC优势1.2 IaC工具1.3 IaC的两种方式 2.Terraform基础概念2.1 Terraform工作原理2.2 Terraform 工作流 3.总结 1.Infrastructure-as-Code(IaC)概念 基础设施即代码(Infrastructure-as-Code,…

SVN 的忽略(Ignore)和递归(Recursively)以及忽略部分

SVN中忽略大家经常用到,但总是似懂非懂,下面就详细展开说明一下忽略如何设置。 两个忽略 通常设置忽略都是文件夹和里面的文件都忽略,通常只需要鼠标右键点击忽略就可以了,如图: 第一个忽略用的最多,就是…

排序算法(C语言版)

前言 排序作为生产环境中常见的需求之一,对整个产品有举足轻重的影响,可以说使用一个合适的排序算法是业务逻辑中比较重要的一部分。今天我们就来介绍常见的排序算法以及实现 排序 所谓排序无非就是按照特定的规则对一组数据就行顺序化。 常见的排序有…

Spring项目报错解读与全部报错详解

你好,我是Qiuner. 为帮助别人少走弯路和记录自己编程学习过程而写博客 这是我的 github https://github.com/Qiuner ⭐️ ​ gitee https://gitee.com/Qiuner 🌹 如果本篇文章帮到了你 不妨点个赞吧~ 我会很高兴的 😄 (^ ~ ^) 想看更多 那就点个关注吧 我…

图像大模型中的注意力和因果掩码

AIM — 图像领域中 LLM 的对应物。尽管 iGPT 已经存在 2 年多了,但自回归尚未得到充分探索。在本文中,作者表明,当使用 AIM 对网络进行预训练时,一组图像数据集上的下游任务的平均准确率会随着数据和参数的增加而线性增加。 要运…

uniApp获取实时定位

通过你获取的key放到项目manifest.json里面&#xff0c;对应填写你所需要的key值&#xff0c;还有高德用户名 用户名&#xff1a; key值的位置&#xff1a; 代码&#xff1a; html: <view class"intList pdNone"><view class"label">详细地…

爬虫:爬取知乎热榜一级评论及回答2024不包含翻页

一、先上结果&#xff08;注:本文仅为兴趣爱好探究&#xff0c;请勿进行商业利用或非法研究&#xff0c;负责后果自负&#xff0c;与作者无关&#xff09; 1、爬标题及其具体内容 2、抓标题下的对应回答 3、爬取对应一级评论 二、上流程 1、获取cookies&#xff08;相信哥哥姐姐…

静心冥想训练入门|流静

在喧嚣的都市中&#xff0c;我们时常被琐事所困&#xff0c;心灵难以得到片刻的宁静。然而&#xff0c;静心冥想训练如同一扇通往内心宁静的门户&#xff0c;引领我们踏上一段静谧的旅程。 静心冥想&#xff0c;并非遥不可及的高深技艺&#xff0c;而是每个人都能掌握的心灵修炼…

优思学院|「按计划推动型」与「需求拉动型」的生产模式

针对生产架构做对比分类的用语&#xff0c;主要有按计划推进型与需求拉动型。 「按计划推动型」与「需求拉动型」两者乃是生产架构上常使用、成对比的两个用语。不过&#xff0c;有时不只用来指单纯的生产现场架构&#xff0c;也有人把它应用在更广泛的生产架构设计上。 按计划…

【yolov8系列】ubuntu上yolov8的开启训练的简单记录

前言 yolov8的广泛使用&#xff0c;拉取yolov8源码工程&#xff0c;然后配置环境后直接运行&#xff0c;初步验证自己数据的检测效果&#xff0c;在数据集准备OK的情况下 需要信手拈来&#xff0c;以保证开发过程的高效进行。 本篇博客更注意为了方便自己使用时参考。顺便也记录…

每日一题——力扣144. 二叉树的前序遍历(举一反三+思想解读+逐步优化)五千字好文

一个认为一切根源都是“自己不够强”的INTJ 个人主页&#xff1a;用哲学编程-CSDN博客专栏&#xff1a;每日一题——举一反三Python编程学习Python内置函数 Python-3.12.0文档解读 目录 我的写法&#xff1a; 代码结构 时间复杂度 空间复杂度 总结 我要更强 代码说明 …

C语言力扣刷题7——删除排序链表中的重复元素 II——[快慢双指针法]

力扣刷题7——删除排序链表中的重复元素 II——[快慢双指针法] 一、博客声明二、题目描述三、解题思路1、思路说明 四、解题代码&#xff08;附注释&#xff09; 一、博客声明 找工作逃不过刷题&#xff0c;为了更好的督促自己学习以及理解力扣大佬们的解题思路&#xff0c;开辟…