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

CSS-Grid（网格）布局

news 2026/2/9 19:39:06

前言

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

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

编程新知 2025/8/16 3:55:30

云原生核心技术 (7/12): K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

编程新知 2025/12/14 22:32:59

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

编程新知 2025/12/14 17:38:17

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

编程新知 2025/12/3 9:38:15

UE5 学习系列（三）创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

编程新知 2026/1/24 10:00:31

Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

编程新知 2025/9/20 4:34:47

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言，以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天，异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

编程新知 2025/11/17 18:58:56

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

编程新知 2026/1/26 19:12:01

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

编程新知 2026/1/31 8:45:21

LabVIEW双光子成像系统技术

双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制&#xff0c;展现出显著的技术优势&#xff1a; 深层组织穿透能力&#xff1a;适用于活体组织深度成像 高分辨率观测性能&#xff1a;满足微观结构的精细研究需求 低光毒性特点&#xff1a;减少对样本的损伤…...

编程新知 2026/1/31 13:04:44