当前位置: 首页 > news >正文

CSS-Grid(网格)布局

前言

之前HTML 页面的布局基本上都是通过 Flexbox 来实现的,能轻松的解决复杂的 Web 布局。 现在又出现了一个构建 HTML 最佳布局体系的新竞争者。就是强大的CSS Grid 布局。

grid和flex区别是什么?适用什么场景?

  1. Flexbox 是一维布局系统,适合做局部布局,比如导航栏组件。
  2. Grid 是二维布局系统,通常用于整个页面的规划。
  3. 二者从应用场景来说并不冲突。虽然 Flexbox 也可以用于大的页面布局,但是没有 Grid 强大和灵活。二者结合使用更加轻松。

特点:

  1. 固定和灵活的轨道尺寸;
  2. 可以使用行号,名称或通过定位网格区域将项目放置在网格上的精确位置;
  3. 可以将多个项目放入网格单元格或区域中,它们可以彼此部分重叠。

缺点:

兼容性比较差。

简单画一张图:

flex布局:

grid布局:

 

网格列

网格元素的垂直线方向称为列。

网格行

网格元素的水平线方向称为行。

网格间距

网格间距指的是两个网格单元之间的网格横向间距或网格纵向间距。

我们可以使用以下属性给元素调整间隙的大小

  • grid-column-gap
  • grid-row-gap
  • grid-gap

我们之前使用的弹性布局 一次只能处理一个维度上的元素布局,一行或者一列。

而现在的grid布局(网格布局)可以更自由的去设置一个容器所站的位置 

例如:

如果使用flex布局去实现排版方法就需要嵌套很多个div去一块一块的区分这些

而现在使用grid布局的话,可以省下很多div的布局,直接将元素所站的位置区分开

基础示例:

使用grid布局实现图中排版:

<!DOCTYPE html>
<html lang="en-us"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>grid</title><style>body {width: 90%;max-width: 900px;margin: 2em auto;font: .9em/1.2 Arial, Helvetica, sans-serif;}.container > div {border-radius: 5px;padding: 10px;background-color: rgb(232, 66, 152);}.container{display:grid;gap:20px;grid-template-columns:1fr 2fr 1fr ;}</style></head><body><div class="container"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div></div></body></html>

我们只需要在父元素中添加display:grid;属性,其元素下的子元素就会跟着变

 fr:他是grid布局中的专属属性,用来平均分配容器所占位置

示例:

如图所示,这种布局方式使用弹性布局来实现相对来说是比较麻烦的,但我们使用grid布局就简单很多了

代码如下:

<!DOCTYPE html>
<html lang="en-us"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width" /><title>Grid</title><style>body {width: 90%;max-width: 900px;margin: 2em auto;font: 0.9em/1.2 Arial, Helvetica, sans-serif;}.container {display: grid;grid-template-columns: 1fr 3fr;/* fr单位是frid布局专用的长度单位,可以平均的区分配每个容器所站的位置 *//* 每列改怎么去分配位置,例如菜单和内容区,side(这里定义的是菜单,那么他就占用1fr的位置,content(内容)他占3fr的位置,所以在图中我们可以看到内容区要比菜单区域更宽一些) */gap: 20px;grid-template-areas:'header header'/* header就是头部 */'side content'/* side菜单,content内容 */'footer footer'/* footer底部 */;}/* 给每个容器设置一个名称 */header{grid-area:header;}footer{grid-area:footer;}aside{grid-area:side;}article{grid-area:content;}header,footer {border-radius: 5px;padding: 10px;background-color: rgb(173, 202, 232);border: 1px solid #000;}aside,article {border: 1px solid #999;}</style></head><body><div class="container"><header>这是头部导航</header><article><h1>这里内容区域</h1><p>内容1</p><p>内容2</p></article><aside><h2>这里是左侧菜单区域</h2><p>菜单</p></aside><footer>这里是底部</footer></div></body>
</html>

 grid布局属性:

参考某教程:grid布局

总结:

Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。

Grid 可以做Flexbox做不了的事,Flexbox 比 Grid 兼容性更好,他们可以共同工作。Grid item可以成为flexbox容器,flex item可以成为grid 容器。

可以根据业务场景需要选择相应布局。

侵删

相关文章:

CSS-Grid(网格)布局

前言 之前HTML 页面的布局基本上都是通过 Flexbox 来实现的&#xff0c;能轻松的解决复杂的 Web 布局。 现在又出现了一个构建 HTML 最佳布局体系的新竞争者。就是强大的CSS Grid 布局。 grid和flex区别是什么&#xff1f;适用什么场景&#xff1f; Flexbox 是一维布局系统&am…...

软件测试4

一 form表单标签 1.form表单标签里面就是所有用户填写的表单数据&#xff1b; action“xxx.py”把表单数据提交给哪一个后台程序去处理 method“post” 传递数据时候的方式方法&#xff0c;post代表隐式提交数据、get明文传送数据 2.input标签的type类型 type“text” 普通的输…...

996的压力下,程序员还有时间做副业吗?

996怎么搞副业&#xff1f; 这个问题其实蛮奇怪的&#xff1a;996的压力下&#xff0c;怎么会还想着搞副业呢&#xff1f; 996还想搞副业的原因有哪些&#xff1f; 大家对于996应该都不陌生&#xff0c;总结就是一个字&#xff1a;忙。 996的工作性质就是加班&#xff0c;就…...

每日学术速递3.1

CV - 计算机视觉 | ML - 机器学习 | RL - 强化学习 | NLP 自然语言处理 Subjects: cs.CV 1.Directed Diffusion: Direct Control of Object Placement through Attention Guidance 标题&#xff1a;定向扩散&#xff1a;通过注意力引导直接控制物体放置 作者&#xff1a;…...

金融行业数据模型

一、Teradata FS-LDM Teradata 公司基于金融业务发布的FS-LDM&#xff08;Financial Servies Logical Data Model&#xff09; 十大主题&#xff1a;当事人、产品、协议、事件、资产、财务、机构、地域、营销、渠道。 1、当事人&#xff08;Party&#xff09; 银行所服务的任…...

【面试题】2023前端vue面试题及答案

Vue3.0 为什么要用 proxy&#xff1f;在 Vue2 中&#xff0c; 0bject.defineProperty 会改变原始数据&#xff0c;而 Proxy 是创建对象的虚拟表示&#xff0c;并提供 set 、get 和 deleteProperty 等处理器&#xff0c;这些处理器可在访问或修改原始对象上的属性时进行拦截&…...

(哈希查找)leetcode128. 最长连续序列

文章目录一、题目1、题目描述2、基础框架3、原题链接二、解题报告1、思路分析2、时间复杂度3、代码详解三、本题小知识一、题目 1、题目描述 给定一个未排序的整数数组 nums &#xff0c;找出数字连续的最长序列&#xff08;不要求序列元素在原数组中连续&#xff09;的长度。…...

js中splice方法和slice方法

splice方法用来操作数组splice(startIndex,deleteNum,item1,....,)此操作会改变原数组。删除数组中元素参数解释&#xff1a;startIndex为起始index索引。deleteNum为从startIndex索引位置开始需要删除的个数。分三种情况&#xff1a;没有传第三个参数的情况下&#xff0c;dele…...

c++ argparse

需求 c程序传参数&#xff0c;像python中argparse一样方便。 方法1 用gflags 参考https://heroacool.blog.csdn.net/?typeblog git clone https://github.com/gflags/gflags cd gflags # 进入项目文件夹 cmake . # 使用 cmake 编译生成 Makefile 文件 make -j 24 # make 编…...

内大892复试真题16年

内大892复试真题16年 1. 输出三个数中较大数2. 求两个数最大公约数与最小公倍数3. 统计字符串中得字符个数4. 输出菱形5. 迭代法求平方根6. 处理字符串(逆序、进制转换)7. 寻找中位数8. 输入十进制输出n进制1. 输出三个数中较大数 问题 代码 #include <iostream>usin…...

面试题 05.02. 二进制数转字符串

二进制数转字符串。给定一个介于0和1之间的实数&#xff08;如0.72&#xff09;&#xff0c;类型为double&#xff0c;打印它的二进制表达式。如果该数字无法精确地用32位以内的二进制表示&#xff0c;则打印“ERROR”。 示例1: 输入&#xff1a;0.625输出&#xff1a;"0…...

MySQL数据更新操作

文章目录前言添加数据插入数据删除数据修改数据前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 数据更新有两种办法&#xff1a; 1&#xff1a;使用数据可视化工具操作 2&#xff1a;SQL语句 添加数据 前面的添加数据命令一次只能插入一条记录。如果想…...

C# 封装

修正bug之前总是要考虑是什么导致了这个bug&#xff0c;并花些时间了解发生了什么。增加打印输出行的语句可能是一个很有效的调试工具。增加语句来打印诊断信息时&#xff0c;要使用Debug.WriteLine。构造器是CLR第一次创建一个新对象实例时调用的方法。字符串插值会让字符串拼…...

每日学术速递3.2

CV - 计算机视觉 | ML - 机器学习 | RL - 强化学习 | NLP 自然语言处理 Subjects: cs.CV 1.Interactive Segmentation as Gaussian Process Classification(CVPR 2023) 标题&#xff1a;作为高斯过程分类的交互式分割 作者&#xff1a;Minghao Zhou, Hong Wang, Qian Zha…...

PCBA方案设计——LCD体重电子秤方案

体重秤&#xff0c;一种测量体重的电子秤&#xff0c;与最近很火的体脂秤来比来说&#xff0c;他是的功能能就有点单一了&#xff0c;只能测量体重&#xff0c;而体脂秤可以精准抓取测量体脂体重等一系列的数据&#xff0c;功能更为多样&#xff0c;但相比之下体重秤的功能简单…...

动态规划--背包问题

动态规划背包问题算法思路代码实现背包问题 假设你要去野营。你有一个容量为6磅的背包&#xff0c;需要决定该携带下面的哪些东西。其中每样东西都有相应的价值&#xff0c;价值越大意味着越重要&#xff1a;  水&#xff08;重3磅&#xff0c;价值10&#xff09;  书&…...

从0开始学python -45

Python3 正则表达式 -3 正则表达式对象 re.RegexObject re.compile() 返回 RegexObject 对象。 re.MatchObject group() 返回被 RE 匹配的字符串。 start() 返回匹配开始的位置end() 返回匹配结束的位置span() 返回一个元组包含匹配 (开始,结束) 的位置 正则表达式修饰符…...

如何用BurpSuite抓取手机数据包

文章目录前言准备工具Burp Suite物理机或虚拟机(移动设备)手机抓包网络环境开启burp并设置代理手机配置代理安装Burp证书开始抓包踩坑后记前言 最近挖了一波src&#xff0c;挖来挖去发现有很多公众号或者app没有测试&#xff0c;这就需要Burp能够抓取手机的数据包了&#xff0…...

Linux性能监控工具iostat解析

1.iostat命令详解 CPU 内存 磁盘 网络 四大子系统 1.1 查看提供iostat命令的软件包 yum provides "*/iostat" yum -y install systatiostat 1 显示实时的数据 iostat 结果自系统启动以来的平均值1.2 iostat命令CPU指标 %user 应用程序消耗CPU资源占比 %nice 进…...

3D可视化大屏制作真的那么难?没有好用的软件解决吗?

有多少人印象里的数据可视化大屏还是像这样的二维大屏&#xff1f;这种二维可视化大屏早就不能满足审美日益提高的大众了。 现在用的都是3D可视化大屏&#xff0c;这种结合了3D技术的可视化形式不仅让数据更加的清晰&#xff0c;也增加了美感&#xff0c;这观看体验&#xff…...

C语言|文件读写,代码运行后留下“记忆”

前言对于一个代码&#xff0c;运行时可能需要保留产生的结果&#xff0c;例如计算值&#xff0c;筛选值&#xff0c;记录点或者小游戏的得分&#xff0c;而正常情况下我们要保存一个数据&#xff0c;想到的肯定是打开我们的文本软件&#xff0c;手撸文字&#xff0c;今天这篇文…...

【2023unity游戏制作-mango的冒险】-6.关卡设计

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! 本文由 秩沅 原创 收录于专栏&#xff1a;unity游戏制作 ⭐mango的冒险关卡设计⭐ 文章目录⭐mango的冒险关卡设计⭐&#x1f468;‍&#…...

JavaScript高级 浏览器WebStorage

WebStorage主要提供了一种机制&#xff0c;可以让浏览器提供一种比cookie更直观的key、value存储方式&#xff1a; localStorage&#xff1a;本地存储&#xff0c;提供的是一种永久性的存储方法&#xff0c;在关闭掉网页重新打开时&#xff0c;存储的内容依然保留&#xff1b; …...

$ 3 :类型强制转换场景、printf函数

1、类型强制转换场景 #include <stdio.h> //强制类型转换 int main() {int i=5;float j=i/2;float k=(float)i/2;printf("%f\n",j);printf("%fln",k);return 0;} j得到的值为2,k得到的值是2.5,因为当我们整数做除法时,默认进行整除,要得到小数,…...

视频会议系统异常中断故障分析案例

1. 背景 某电气化局的用户反馈&#xff0c;近期视频系统在使用过程中出现频繁中断的情况&#xff0c;这种情况影响到用户的视频体验和工作效率。 针对此问题&#xff0c;我们将NetInside流量分析系统部署到电气化局机房&#xff0c;使用流量分析系统提供实时和历史原始流量。…...

什么是文件传输中台?

企业文件传输的场景有哪些&#xff1f; 企业日常办公中无时无刻不在产生数据文件。多样化的数据已成为企业的重要资产&#xff0c;更被称为是“新石油”。数据并不是单单存储起来就行了&#xff0c;而是需要高效又安全的让数据流转起来&#xff0c;释放其自身的价值&#xff0…...

设计模式-代理模式(Java)

本篇文章详细说明代理模式并用代码简单介绍代理模式的用法&#xff0c;以及代理模式在实际应用中的源码简单解析。 1、什么是代理模式和代码实现 代理模式是一种设计模式&#xff0c;它允许在不改变原有类的情况下&#xff0c;为其提供一种代理机制&#xff0c;用于控制其访问…...

如何处理负面评论?利用负面评论发挥优势

每家公司都应该做的一件事&#xff1a;回复评论&#xff01; 37%的买家积极考虑对评论的回应&#xff0c;以评估和对品牌的看法。所以不要忘记回复评论&#xff01; 如何处理负面评论 如果您的公司正在经历大量负面评论&#xff0c;请了解您的产品团队如何利用它们来发挥自己的…...

一个JAVA程序员必备的技能有哪些?知道这些帮你快速升职加薪

和其他行业一样&#xff0c;软件研发行业也有必须要掌握的工具&#xff0c;每个程序员只有学习了这些工具之后才会不断成长&#xff0c;今天就和大家分享一些程序员必备的十项技能。老实说&#xff0c;如果每个程序员都非常了解这些工具&#xff0c;那么他可以在日常工作中完成…...

DHTMLX Suite 8.0 重大发布,新增更多新主题、热图图表、辅助功能支持功能

DHTMLX Suite 是一个用于构建跨浏览器Web应用和移动应用的强大JavaScript UI库。DHTMLX UI 组件库允许您更快地构建跨平台、跨浏览器 Web 和移动应用程序。它包括一组丰富的即用式 HTML5 组件&#xff0c;这些组件可以轻松组合到单个应用程序界面中。 DHTMLX Spreadsheet正版试…...