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

CSS-Grid（网格）布局

news 2026/3/27 9:13:51

前言

之前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…...

编程日记 2023/3/2 16:57:28

软件测试4

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

编程日记 2023/3/2 16:56:24

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

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

编程日记 2023/3/2 16:55:13

每日学术速递3.1

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

编程日记 2023/3/2 16:54:08

金融行业数据模型

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

编程日记 2023/3/2 16:53:03

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

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

编程日记 2023/3/2 16:51:56

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

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

编程日记 2023/3/2 16:50:53

js中splice方法和slice方法

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

编程日记 2023/3/2 16:49:47

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 编…...

编程日记 2023/3/2 16:48:44

内大892复试真题16年

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

编程日记 2023/3/2 16:47:40

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

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

编程日记 2023/3/2 16:46:32

MySQL数据更新操作

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

编程日记 2023/3/2 16:45:28

C# 封装

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

编程日记 2023/3/2 16:44:21

每日学术速递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…...

编程日记 2023/3/2 16:43:17

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

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

编程日记 2023/3/2 16:42:13

动态规划--背包问题

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

编程日记 2023/3/2 16:41:08

从0开始学python -45

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

编程日记 2023/3/2 16:39:58

如何用BurpSuite抓取手机数据包

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

编程日记 2023/3/2 16:37:48

Linux性能监控工具iostat解析

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

编程日记 2023/3/2 16:36:44

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

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

编程日记 2023/3/2 16:35:41

三步突破抖音音乐批量下载难题：douyin-downloader全功能技术指南

三步突破抖音音乐批量下载难题&#xff1a;douyin-downloader全功能技术指南 【免费下载链接】douyin-downloader 项目地址: https://gitcode.com/GitHub_Trending/do/douyin-downloader 在数字内容创作领域&#xff0c;背景音乐是提升作品感染力的关键元素。然而&…...

编程新知 2026/3/27 8:00:21

用TurtleBot3实测：Navigation2局部代价地图的滚动窗口为何必须用odom坐标系？

TurtleBot3实测&#xff1a;为什么Navigation2局部代价地图必须绑定odom坐标系&#xff1f; 当你在Gazebo中第一次看到TurtleBot3的导航表现时&#xff0c;可能会对局部代价地图&#xff08;Local Costmap&#xff09;的坐标系选择产生疑问。为什么这个实时更新的避障地图要绑定…...

编程新知 2026/3/27 7:36:14

LFM2.5-1.2B-Thinking-GGUF代码生成能力评测：对比Claude Code的轻量化替代方案

LFM2.5-1.2B-Thinking-GGUF代码生成能力评测&#xff1a;对比Claude Code的轻量化替代方案 1. 评测背景与模型特点 在当今AI辅助编程领域&#xff0c;大型语言模型已经成为开发者日常工作的得力助手。然而&#xff0c;许多高性能模型往往需要云端部署或强大的计算资源&#x…...

编程新知 2026/3/27 7:28:13

SDMatte惊艳抠图效果展示：10组高难度玻璃/纱布/叶片实测对比图

SDMatte惊艳抠图效果展示&#xff1a;10组高难度玻璃/纱布/叶片实测对比图 1. 开篇&#xff1a;当AI遇见高难度抠图 在图像处理领域&#xff0c;抠图一直是个技术活。特别是遇到玻璃杯、薄纱窗帘、树叶这些半透明或边缘复杂的物体时&#xff0c;传统工具往往力不从心。今天我…...

编程新知 2026/3/27 6:25:12

告别macOS原生切换烦恼：alt-tab-macos让窗口管理效率提升300%的终极指南

告别macOS原生切换烦恼&#xff1a;alt-tab-macos让窗口管理效率提升300%的终极指南 【免费下载链接】alt-tab-macos Windows alt-tab on macOS 项目地址: https://gitcode.com/gh_mirrors/al/alt-tab-macos 作为macOS用户&#xff0c;你是否也曾对系统自带的窗口切换功…...

编程新知 2026/3/27 5:06:41

Unsloth Docker部署详解：从零开始搭建训练环境

Unsloth Docker部署详解&#xff1a;从零开始搭建训练环境 1. 环境准备与Docker安装 1.1 系统要求检查 在开始之前&#xff0c;请确保你的系统满足以下基本要求&#xff1a; 64位Linux系统&#xff08;推荐Ubuntu 22.04&#xff09;NVIDIA显卡驱动已安装&#xff08;建议版…...

编程新知 2026/3/27 5:04:29

告别复制粘贴！用ABAP类CL_SALV_BS_RUNTIME_INFO自动化获取任意ALV报表数据

告别复制粘贴&#xff01;用ABAP类CL_SALV_BS_RUNTIME_INFO自动化获取任意ALV报表数据 在SAP系统的日常开发中&#xff0c;ABAP程序员经常需要从各种ALV报表中提取数据用于二次处理。传统的手动复制粘贴方式不仅效率低下&#xff0c;还容易出错。本文将介绍如何利用CL_SALV_BS_…...

编程新知 2026/3/27 3:49:33

做了十几年财务，我用RPA把最累的工作交给了“机器人”

在财务这行摸爬滚打了十几年&#xff0c;算是一路看着这个行业慢慢“进化”过来的&#xff1a;从最早拿计算器对数据&#xff0c;到后来用电脑做账&#xff0c;从手工账本过渡到ERP系统&#xff0c;再到这两年铺天盖地的“数智化转型”。中间也确实尝试过不少所谓的“黑科技”。…...

编程新知 2026/3/27 1:15:53

League-Toolkit：基于LCU API的英雄联盟效率工具集

League-Toolkit&#xff1a;基于LCU API的英雄联盟效率工具集 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit League-Toolkit是一…...

编程新知 2026/3/27 0:13:26

HertzBeat与Prometheus兼容性详解：平滑迁移和生态整合终极指南

HertzBeat与Prometheus兼容性详解&#xff1a;平滑迁移和生态整合终极指南 Apache HertzBeat是一款功能强大的开源实时监控系统&#xff0c;与Prometheus生态系统完美兼容&#xff0c;提供无代理、高性能集群和自定义监控功能。&#x1f680; 作为新一代监控工具&#xff0c;H…...

编程新知 2026/3/26 23:59:17