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

CSS——grid网格布局的基本使用

news 2025/12/19 19:43:04

网格布局在实现页面自适应，大屏可视化中常常使用，在这篇博客里，记录一下网格布局的基本使用。

参考文档：网格布局_菜鸟教程

文章目录

    • 1. 体会grid的自适应性
    • 2. grid-template-arr配置网格行列
    • 3. 网格单位fr与repeat()简写属性值
    • 4. gap属性设置格子间距
    • 5. 实现跨行/列合并网格

1. 体会grid的自适应性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>grid</title><style>* {padding: 0;margin: 0;}.container {width: 100vw;height: 100vh;background-color: skyblue;}.item {border: 1px solid #ccc;box-sizing: border-box;background-color: tomato;}</style>
</head>
<body><div class="container"><div class="item">1</div><div class="item">2</div> <div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div><div class="item">10</div><div class="item">11</div><div class="item">12</div></div>
</body>
</html>

以上代码实现了一个占满可视区，天蓝色背景的父盒子内放入了12个灰色边框，番茄色背景的块级盒子，如下图：
在这里插入图片描述

下面我们将父盒子的display属性设置为grid，它就会变成一个网格容器，如下代码以及页面结果：

.container {width: 100vw;height: 100vh;background-color: skyblue;display: flex;  /* 将盒子变为网格容器 */
}

在这里插入图片描述

可以看到，网格容器内的子盒子会自动拉伸以填满网格容器的可用空间（父盒子占满可视区，因此上图的番茄色子盒子占满了可视区）；我们可以试试改变浏览器可视区的大小，会发现子盒子大小会跟着改变，这就是网格布局的自适应性。

2. grid-template-arr配置网格行列

使用属性grid-template-rows/columns可以指定行/列的大小，以及网格布局中设置行/列的数量。

其中，该属性值的个数表示设置的行数，属性值的大小代表行的高度。

下面我们通过代码来体会这两个属性：

.container {width: 100vw;height: 100vh;background-color: skyblue;display: grid;/* 设置了三行 每行高200px 其余行行高会自适应 */grid-template-rows: 200px 200px 200px;
}

上面我们在第一节的基础代码上通过grid-template-rows属性设置了前三行网格，每行网格高度200rpx，结果如下：在这里插入图片描述
可以看到前三行高度都改变成200px，而未设置的行都根据可用空间自适应高度了。

下面我们在以上基础上再体会一下grid-template-columns属性。

.container {width: 100vw;height: 100vh;background-color: skyblue;display: grid;/* 设置了三行 每行高200px 其余行行高会自适应 */grid-template-rows: 200px 200px 200px;/* 设置了四列 每列宽100px 其余列宽会自适应  */grid-template-columns: 100px 100px 100px 100px;
}

以上代码在原先的基础增加了网格列宽和列数设置，页面结果如下：
在这里插入图片描述
综合这两个属性，以上代码实现了将12个格子渲染成3行3列的网格布局，并且行高200px，列高100px。

但是需要注意的是：行数和列数的乘积必须等于格子数，否则页面会自动忽略grid-template-row/columns属性值的末尾部分属性导致无法得到预想结果。

3. 网格单位fr与repeat()简写属性值

网格引入了 fr 单位来帮助我们创建灵活的网格轨道。一个 fr 单位代表网格容器中可用空间的一等份。

直接上代码：

.container {width: 100vw;height: 100vh;background-color: skyblue;display: grid;grid-template-rows: 200px 1fr 1fr;  // 使用了1frgrid-template-columns: 100px 100px 100px 100px;
}

结果如下：
在这里插入图片描述
可以看到，第二三行格子在第一行定死行高的情况下，自动占满了剩余可用空间，由于都是设置的1fr，因此均分了剩余可用空间。

另外，这里介绍一下repeat()方法实现简写属性值。

repeat(行/列数, 行高/列宽)

直接看代码：

.container {width: 100vw;height: 100vh;background-color: skyblue;display: grid;/* 简写 */grid-template-rows: 200px repeat(2, 1fr);/* 简写 */grid-template-columns: repeat(4, 100px);
}

以上使用了repeat()方法简写了属性值，但是可以实现跟上面同样的效果如下。
在这里插入图片描述

4. gap属性设置格子间距

gap属性可以设置网格之间的间距，它是row-gap和 column-gap的简写属性，分别使用这两个属性可以设置行和列网格之间的间距。

下面看代码：

.container {width: 100vw;height: 100vh;background-color: skyblue;display: grid;/* 设置了三行 每行高200px 其余行行高会自适应 */grid-template-rows: 200px repeat(2, 1fr);/* 设置列数和列宽 这里设置了四列 每列宽100px 其余列宽会自适应  */grid-template-columns: repeat(4, 100px);gap: 10px;
}

结果如下：
在这里插入图片描述
可以看到行和列直接的间距都变成了10px。

5. 实现跨行/列合并网格

网格使用grid-row网格行属性实现跨行合并；
网格使用grid-column网格列属性实现跨列合并；
网格使用grid-area网格区域属性实现跨行+列合并。

属性值说明：
grid-row/column: span 行/列数
grid-area: span 行数 / span 列数

值的注意的是：合并网格必须先删掉被合并的网格。

另外，这三个属性都是单个网格使用的，而不是放有网格的网格容器使用的，跟前面几节的不一样。

下面看代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>grid</title><style>* {padding: 0;margin: 0;}.container {width: 100vw;height: 100vh;background-color: skyblue;display: grid;grid-template-rows: 200px repeat(2, 1fr);grid-template-columns: repeat(4, 100px);gap: 10px;}.item {border: 1px solid #ccc;box-sizing: border-box;background-color: tomato;font-size: 30px;font-weight: 600;}.one {/* 这个单元格跨越2列 合并序号1格子合并掉序号2的格子 */grid-column: span 2;}.two {/* 这个单元格跨越2行 序号4的格子合并掉序号8的格子*/grid-row: span 2;}.three {/* 这个单元格跨越2行2列 序号5的格子合并掉序号6、9、10三个格子*/grid-area: span 2 / span 2;}</style>
</head><body><div class="container"><div class="item one">1</div><!-- <div class="item">2</div>  --><div class="item">3</div><div class="item two">4</div><div class="item three">5</div><!-- <div class="item">6</div> --><div class="item">7</div><!-- <div class="item">8</div> --><!-- <div class="item">9</div><div class="item">10</div> --><div class="item">11</div><div class="item">12</div></div>
</body></html>

通过自定义类one、two、three分别实现三种情况的格子合并，效果如下：

在这里插入图片描述

使用变量自定义熟悉值

在这里插入图片描述

以上就是最常用的grid相关属性了，更多内容查看文档：网格布局_菜鸟教程

相关文章：

CSS——grid网格布局的基本使用

网格布局在实现页面自适应&#xff0c;大屏可视化中常常使用&#xff0c;在这篇博客里&#xff0c;记录一下网格布局的基本使用。 参考文档&#xff1a;网格布局_菜鸟教程 文章目录 1. 体会grid的自适应性2. grid-template-arr配置网格行列3. 网格单位fr与repeat()简写属性值4…...

编程日记 2023/9/23 20:08:43

【python】使用Nuitka打包python项目-demo示例

文章目录 写在前面参考准备工作Quick Start参数说明使用打包程序输出目录结构日志2023.09.20 写在前面 本文的demo示例的代码/数据可从笔者的GitCode获取: HelloWorld 参考 Nuitka官网: https://github.com/Nuitka/NuitkaNuitka使用: https://daobook.github.io/nuitka-doc/…...

编程日记 2023/9/23 20:03:38

Java多线程篇(5)——cas和atomic原子类

文章目录 CASAtomic 原子类一般原子类针对aba问题 —— AtomicStampedReference针对大量自旋问题 —— LongAdder CAS 原理大致如下&#xff1a; 在java的 Unsafe 类里封装了一些 cas 的api。以 compareAndSetInt 为例&#xff0c;来看看其底层实现。 可以发现&#xff0c;最…...

编程日记 2023/9/23 20:02:37

数据结构---栈和队列

栈(Stack) 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈 顶&#xff0c;另一端称为栈底。栈中的数据元素遵守后进先出LIFO&#xff08;Last In First Out&#xff09;的原则。 压栈&#xff1…...

编程日记 2023/9/23 19:58:34

2023-9-23 合并果子

题目链接&#xff1a;合并果子 #include <iostream> #include <algorithm> #include <queue>using namespace std;int main() {int n;cin >> n;priority_queue<int, vector<int>, greater<int>> heap;for(int i 0; i < n; i){in…...

编程日记 2023/9/23 19:56:31

基于QT和UDP实现一个实时RTP数据包的接收，并将数据包转化成文件

简单介绍&#xff1a;代码写的比较详细&#xff0c;需要留意的地方看结尾介绍 头文件 #ifndef RTPRECEIVER_H #define RTPRECEIVER_H#include <QDialog> #include <QUdpSocket> #include <QFile> #include <QTextStream> #include <httpclient.h&g…...

编程日记 2023/9/23 19:55:29

云原生安全性：保护现代应用免受威胁

文章目录 引言云原生安全性的挑战云原生安全性的关键实践1. 安全的镜像构建2. 网络策略3. 漏洞扫描和漏洞管理4. 认证和授权5. 日志和监控 云原生安全工具结论 &#x1f389;欢迎来到云计算技术应用专栏~云原生安全性&#xff1a;保护现代应用免受威胁 ☆* o(≧▽≦)o *☆嗨~我…...

编程日记 2023/9/23 19:54:29

R语言绘图-3-Circular-barplot图

0. 参考&#xff1a; https://r-graph-gallery.com/web-circular-barplot-with-R-and-ggplot2.html 1. 说明&#xff1a; 利用 ggplot 绘制 环状的条形图 (circular barplot)&#xff0c;并且每个条带按照数值大小进行排列。 2 绘图代码: 注意&#xff1a;绘图代码中的字体…...

编程日记 2023/9/23 19:53:27

解决Keil5下载没有对应芯片Flash的问题

问题描述 例如芯片是STM32F103ZET6&#xff0c;但是选项中并没有对应型号的芯片导致下载失败。 解决方法 1、寻找芯片安装包的具体位置&#xff0c;芯片安装包路径在软件安装过程中会有&#xff08;如图1所示&#xff09;。如果没有记录可以双击一下芯片安装包会直接提示。…...

编程日记 2023/9/23 19:52:26

深拷贝与浅拷贝（对象的引用）

可以用赋值 1.对象的引用 代码&#xff1a; <!-- 1.对象的引用 --><script>const info{name:"lucy",age:20}const objinfo;info.name"sam"console.log(obj.name) //sam</script>图解&#xff1a; 等于号的赋值&#xff0c;对象info…...

编程日记 2023/9/23 19:46:20

重新认识架构—不只是软件设计

前言 什么是架构&#xff1f; 通常情况下&#xff0c;人们对架构的认知仅限于在软件工程中的定义&#xff1a;架构主要指软件系统的结构设计&#xff0c;比如常见的SOLID准则、DDD架构。一个良好的软件架构可以帮助团队更有效地进行软件开发&#xff0c;降低维护成本&#xff0…...

编程日记 2023/9/23 19:45:19

我的创业笔记：困境与思索

现在是2023年9月22日傍晚&#xff0c;我一个人走在广州的珠江边&#xff0c;静静地思索着当前个人创业面临的困境&#xff0c;不由自主地想将这些想法记录下来。 故事需要从两个月前说起。2023年7月31号&#xff0c;我从金山办公离职后&#xff0c;就满心欢喜地开启了自己的个…...

编程日记 2023/9/23 19:44:18

minio文件上传

1.代码 大佬仓库&#xff1a;https://gitee.com/Gary2016/minio-upload?_fromgitee_search 关于这个代码的讲解&#xff1a;来自b站 2.准备minio 参考&#xff1a;[1]、[2] 2.1 下载 官网&#xff1a;https://min.io/download#/windows 2.2 启动 ①准备一个data文件夹…...

编程日记 2023/9/23 19:43:16

IDEA .iml文件及.idea文件夹详解

.iml文件 idea 对module 配置信息之意&#xff0c; infomation of module。每个模块都有一个iml文件。 IDEA中的.iml文件是项目标识文件&#xff0c;缺少了这个文件&#xff0c;IDEA就无法识别项目。跟Eclipse的.project文件性质是一样的。并且这些文件不同的设备上的内容也会…...

编程日记 2023/9/23 19:42:15

使用Python做一个微信机器人

介绍 简介 该程序将微信的内部功能提取出来&#xff0c;然后在程序里加载Python&#xff0c;接着将这些功能导出成库函数&#xff0c;就可以在Python里使用这些函数 程序启动的时候会执行py_code目录下的main.py&#xff0c;类似于你在命令行使用python main.py。 现在会以…...

编程日记 2023/9/23 19:40:13

云计算战略：选择适合你业务的云平台

文章目录 云计算的概述选择云平台的关键因素1. 业务需求2. 预算3. 性能要求4. 数据隐私和合规性 示例&#xff1a;选择适合的云平台业务需求预算性能要求数据隐私和合规性 代码示例&#xff1a;使用云平台服务结论 &#x1f389;欢迎来到云计算技术应用专栏~云计算战略&#xf…...

编程日记 2023/9/23 19:37:10

Python：打印目录下每层的文件总数

代码如下&#xff1a; import osclass FileCount(object):def __init__(self,root_path: str):self.root_path root_pathself._count Noneself._file_count Noneself.children []def get_count(self):if self._count is None:self._count 0self._file_count 0for child_…...

编程日记 2023/9/23 19:35:07

LVS-NAT模式

LVS负载均衡群集 群集的定义 Cluster&#xff0c;集群&#xff08;也称群集&#xff09;由多台主机构成&#xff0c;但对外只表现为一一个整体&#xff0c;只提供一-个访问入口(域名或IP地址)&#xff0c; 相当于一台大型计算机。 群集的作用 对于企业服务的的性能提升一般…...

编程日记 2023/9/23 19:34:06

【神印王座】龙皓晨竟然上了头版头条！内容违背，新闻真实性原则

Hello,小伙伴们&#xff0c;我是小郑继续为大家深度解析神印王座国漫。 大家有没有发现&#xff0c;当龙皓晨他们从驱魔关回到圣城时&#xff0c;有这么一幕&#xff0c;一个卖报小孩边走边说&#xff1a;驱魔关大捷&#xff0c;少年英雄龙皓晨操控守护与怜悯之神印王座&#x…...

编程日记 2023/9/23 19:33:06

C++之类和函数权限访问总结(二百二十七)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…...

编程日记 2023/9/23 19:29:01

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

编程新知 2025/7/30 7:20:17

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

编程新知 2025/12/15 20:23:19

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

编程新知 2025/12/17 22:48:09

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

编程新知 2025/12/17 21:16:11

蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

编程新知 2025/12/13 23:03:54

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

编程新知 2025/12/15 20:41:35

Frozen-Flask ：将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

编程新知 2025/12/5 20:57:13

【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

编程新知 2025/12/13 2:58:08

华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

编程新知 2025/12/9 6:34:50

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

编程新知 2025/12/15 0:46:10