是时候学习Grid布局了

一、序言

先说什么?当然先说大家最关心的兼容性了
CanIUse

在这里插入图片描述

嗯,对于非要兼容IE的开发者,我建议,量力而行!兼容性还是不如Flex
当然,如果你flex够熟悉了,但却被一些布局有时候难倒,我建议还是学习一下Grid,会让你柳暗花明,眼前一亮的

二、基础使用

1)grid-template-columns和grid-template-rows属性来定义网格的列和行
grid-template-rows / grid-template-columns 接收的值有 auto、fr、px 和 %。
fr类似flex的flex:1

.container {display: grid;grid-template-columns: 100px 200px 100px; /* 定义三列,宽度分别为100px, 200px和100px */grid-template-rows: 50px 100px; /* 定义两行,行高分别为50px和100px *//* 其他值举例 */grid-template-columns: [linename1] 100px [linename2 linename3]; // 一条网格线多个名字grid-template-columns: minmax(100px, 1fr);  // 最小100px, 最大满屏grid-template-columns: fit-content(40%);    // 指定最大值不超过屏宽40%
}

2)grid-column 和 grid-row 属性来控制网格项目的位置和大小。

.item1 {grid-column: 1 / 3; /* 从第1列开始,跨越到第3列 */grid-row: 1 / 2; /* 从第1行开始,跨越到第2行 */
}

3)网格线命名

.container {display: grid;grid-template-columns: [start] 100px [middle] 200px [end] 100px;grid-template-rows: [header] 50px [main] 100px;
}.item1 {grid-column: start / middle; /* 从名为 'start' 的线到 'middle' 的线 */grid-row: header / main; /* 从名为 'header' 的线到 'main' 的线 */
}

4)自动布局

.container {display: grid;grid-template-columns: repeat(3, 1fr); /* 创建3个等宽的列 */
}.container {display: grid;grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* 自动填充列,最小宽度100px,最大宽度1fr */
}

5)grid-template-areas定义网格区域

grid-template-areas:    "header header header""navigation main ads""footer footer footer";

6) row-gap和column-gap定义间距,可简写gap

row-gap: 20px; /* 设置行间距为20px */column-gap: 30px; /* 设置列间距为30px */

7)justify-items: start | end | center | stretch(默认),定义网格子项的内容水平方向上的对齐方式

8)align-items: start | end | center | stretch(默认),定义网格子项的内容垂直方向上的对齐方式

9)place-self里面包含了有 justify-self、align-self 两个属性

10)grid-auto-flow 属性定义自动布局算法,可选为row,column,dense(稠密堆积算法);

11)grid-auto-rows 定义隐式创建的行高度

三、技巧:

1.使某些元素占满视口

grid-column: 1 / -1;

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

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

相关文章

学习react-登录状态验证

1.创建三个页面LoginPage, HomePage,NotFoundPage用于Router 创建LoginPage.tsx用于做登录页面 // LoginPage.tsx const LoginPage (props:LoginProp) > {const navigate useNavigate();return( <h1 onClick{ ()>{navigate("/");}}>Hello Login, {pr…

昇思25天学习打卡营第1天 | 快速入门教程

昇思大模型平台&#xff0c;就像是AI学习者和开发者的超级基地&#xff0c;这里不仅提供丰富的项目、模型和大模型体验&#xff0c;还有一大堆经典数据集任你挑。 AI学习有时候就像找不到高质量数据集的捉迷藏游戏&#xff0c;而且本地跑大数据集训练模型简直是个折磨&#xf…

JQuery简单实现ul li点击菜单项被选中的菜单项保持高亮状态(导航ul li点击切换样式)

效果&#xff1a; JS&#xff1a; $(function () {//遍历list&#xff08;一般为ul li&#xff09;$("#menu a").each(function () {//给当前项添加点击事件&#xff08;点击后切换样式&#xff09;$(this).bind(click,function () {// 移除其他所有项的active类$(&…

挑战房市预测领头羊:KNN vs. 决策树 vs. 线性回归

挑战房市预测领头羊&#xff08;KNN&#xff0c;决策树&#xff0c;线性回归&#xff09; 1. 介绍1.1 K最近邻&#xff08;KNN&#xff09;&#xff1a;与邻居的友谊1.1.1 KNN的基础1.1.2 KNN的运作机制1.1.3 KNN的优缺点 1.2 决策树&#xff1a;解码房价的逻辑树1.2.1 决策树的…

【日常设计案例分享】通道对账

今天跟同事们讨论一个通道对账需求的技术设计。鉴于公司业务线有好几个&#xff0c;为避免不久的将来各业务线都重复竖烟囱&#xff0c;因此&#xff0c;我们打算将通道对账做成系统通用服务&#xff0c;以降低各业务线的开发成本。 以下文稿&#xff08;草图&#xff09;&…

局部变量,在使用时再定义

关于局部变量&#xff0c;适时定义局部变量&#xff0c;可提高代码清晰度和可读性&#xff0c;并能规避不必要的代码bug 局部变量&#xff0c;在使用时再定义&#xff0c;提高代码可读性 下面代码中的2个方法&#xff0c;第1个 verifyTaskApply 调用第2个 existAppliedTask 。…

20240730 每日AI必读资讯

&#x1f3ac;燃爆&#xff01;奥运8分钟AI影片火了&#xff0c;巴赫主席&#xff1a;感谢中国黑科技 - 短片名为《永不失色的她》&#xff08;To the Greatness of HER&#xff09;&#xff0c;由阿里巴巴和国际奥委会联合推出。 - 百年奥运史上伟大女性的影响故事在此被浓缩…

Rust语言入门第七篇-控制流

文章目录 Rust语言入门第七篇-控制流If 表达式基本结构特点和规则示例 let 语句中使用 ifloop 循环基本结构特点示例综合示例 while 循环基本结构特点示例综合示例 与 loop 循环的区别 for 循环基本结构详细说明特点示例综合示例 Rust语言入门第七篇-控制流 Rust 的控制流是指…

Oracle Database 23.5 - for Engineered Systems版本发布

要尝鲜的可以在https://edelivery.oracle.com/下载。对于x86的本地版本再等等吧。 安装可参考飞总的&#xff1a;oracle 23ai&#xff08;23.5.0.24.07&#xff09;完整功能版安装体验 – 提供7*24专业数据库(Oracle,SQL Server,MySQL,PostgreSQL等)恢复和技术支持Tel:1781323…

Python数值计算(12)

本篇说说Neville方法。Neville方法的基础是&#xff0c;插值多项式可以递归的生成&#xff0c;有时进行插值的目的是为了计算某个点的值&#xff0c;这个时候并不需要将拟合曲线完全求出&#xff0c;而是可以通过递归的方式进行计算&#xff0c;具体操作如下&#xff1a; 例如…

OpenGL学习 1

一些唠叨&#xff1a; 很多时候&#xff0c;都被Live2d吸引&#xff0c;去年想给网页加个live2d看板娘&#xff0c;结果看不懂live2d官方给的SDK&#xff0c;放弃了。今天又想弄个live2d桌宠&#xff0c;都已经在网上找到Python 的 Live2D 拓展库了&#xff0c;并提供了用QT实现…

昇思25天学习打卡营第19天|ResNet50 图像分类案例:数据集、训练与预测可视化

目录 环境配置 数据集加载 数据集可视化 Building Block Bottleneck 构建ResNet50网络 模型训练与评估 可视化模型预测 环境配置 首先指出实验环境预装的 mindspore 版本以及更换版本的方法。然后&#xff0c;它卸载了已安装的 mindspore 并重新安装指定的 2.3.0rc1 版本…

值得买科技与MiniMax达成官方合作伙伴关系,共建融合生态

7月29日&#xff0c;值得买科技与大模型公司MiniMax宣布达成官方合作伙伴关系。 MiniMax旗下大模型产品海螺AI现已接入值得买“消费大模型增强工具集”&#xff0c;基于海螺AI比价策略&#xff0c;用户可通过海螺AI“悬浮球”功能实现快速比价及跳转购买。 此次合作也标志着值…

操作系统重点总结

文章目录 1. 操作系统重点总结1.1 操作系统简介1.1.1 操作系统的概念和功能1.1.2 操作系统的特征1.1.2.1 并发1.1.2.2 共享1.1.2.3 虚拟1.1.2.4 异步 1.1.3 操作系统的发展与分类1.1.4 中断和异常1.1.5 系统调用1.1.6 操作系统的体系结构1.1.7 操作系统简介总结 1.2 进程1.2.1 …

使用YApi平台来管理接口

快速上手 进入YApi官网&#xff0c;进行注册登录https://yapi.pro/添加项目 3. 添加分类 4. 添加接口 5. 添加参数 添加返回数据 可以添加期望 验证 YAPI&#xff08;Yet Another Practice Interface&#xff09;是一个现代化的接口管理平台&#xff0c;由淘宝团队…

企业邮箱如何进行邮件监控

企业邮箱监控保障资产安全、合规性&#xff0c;防范网络攻击&#xff0c;提升员工行为。核心要素包括内容扫描、行为分析、合规性检查等。实施策略涉及技术选择、政策制定、员工培训。企业邮箱如何进行邮件监控呢&#xff1f;Zoho邮箱的eDiscovery功能可实现长期邮件保存和监控…

基于百度paddle检索系统的召回

所谓召回&#xff0c;无非就是用一段不规则文本模拟用户query查询&#xff0c;而要召回的是标准的titlekey,这些是要构建索引库的&#xff0c;所有相似文本对的第二个文本必须要在索引库里存在&#xff0c;不然就没法评估,因为标记都是0,还有召回1&#xff0c;召回5等,并不是什…

在Ubuntu 22 VPS服务器上更改phpMyadmin端口的方法

更改 Ubuntu 22 VPS服务器上的 phpMyAdmin 端口可以增强安全性和可管理性。但是具体应该怎么操作呢&#xff1f;接下来将带您了解在Ubuntu 22 VPS 服务器上更改phpMyadmin的端口全过程&#xff0c;一起来看看吧。 准备你的环境 在开始之前&#xff0c;让我们先确保你已做好一…

【前端逆向】最佳JS反编译利器,原来就是chrome!

有时候需要反编译别人的 min.js。 比如简单改库、看看别人的 min,js 干了什么&#xff0c;有没有重复加载&#xff1f;此时就需要去反编译Javascript。 Vscode 里面有一些反编译插件&#xff0c;某某Beautify等等。但这些插件看人品&#xff0c;运气不好搞的话&#xff0c;反…

实验2-3-8 计算火车运行时间

//实验2-3-8 计算火车运行时间 /* 输入格式&#xff1a;输入在一行中给出2个4位正整数&#xff0c;其间以空格分隔&#xff0c;分别表示火车的出发时间和到达时间。 每个时间的格式为2位小时数&#xff08;00-23&#xff09;和2位分钟数&#xff08;00-59&#xff09;&#xff…