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

HTML+CSS - 网页布局之网格布局

news 2025/12/4 1:38:51

1. dispaly设置

display是 CSS 中用于设置元素的显示方式的属性。它决定了元素如何被渲染到页面上。不同的display值会改变元素的显示行为，包括布局、排版以及对其他元素的影响。

其中网格容器是最常用的几种方式之一，在文档中创建类似于网格的效果，将组建十分方便的进行填充布局。

2. 创建网格容器

1. 设置元素显示方式为grid

.container{display:grid;
}

创建一个网格图，初始为一例一行。

 

2. 设置网格列的个数与宽度

grid-template-columns:repeat(3,1fr);

px代表实数排布，设置多少，间隔多少。

fr代表比例表示，在可编辑位置进行比例排布。

3. 设置网格行的个数与高度

grid-template-rows:repeat(2,100px);

设置多少行，每一行的高度。

3. 网格细节修改

2.1 设置间隔大小

grid-gap:10px; /*行列间隔大小一致*/
grid-column-gap:10px; /*网格列的大小，即间隔宽度*/
grid-row-gap:10px; /*网格行大小，即间隔高度*/

设置每一个块状体彼此之间的距离 

2.2 显式网格与隐式网格

显式网格是我们用 grid-template-columns 或 grid-template-rows 属性创建的。而隐式网格则是当有内容被放到网格外时才会生成的。

隐式网格会自动生成，根据我们所设置的相关参数持续排布。若没有指定行的大小，则默认为auto

2.3 自动填充多列

.container {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));grid-auto-rows: minmax(100px, auto);grid-gap: 20px;
}

设置列：每一列最小200px宽度，最大1fr的比例，根据大小自动生成有多少列数

设置行：最小100px的高度，最大不设限

3. 网格元素放置

3.1 直接放置

	.container {display: grid;grid-template-columns: repeat(3, 1fr); /* 三列，每列占据相等的空间 */grid-template-rows: repeat(2, 100px);  /* 两行，每行100px高 */gap: 10px; /* 网格单元之间的间隙 */}

一般而言，会自动将网格布局所含概的子类类别自动按照代码顺序填充进去

 

3.2 自定义位置放置

• grid-column & grid-row

<div class="container"><div class="item1">1</div><div class="item2">2</div><div class="item3">3</div><div class="item4">4</div><div class="item5">5</div><div class="item6">6</div>
</div>

.item1 { grid-column: 1 / 2; grid-row: 1 / 2; }
.item2 { grid-column: 2 / 3; grid-row: 1 / 2; }
.item3 { grid-column: 3 / 4; grid-row: 1 / 2; }
.item4 { grid-column: 1 / 2; grid-row: 2 / 3; }
.item5 { grid-column: 2 / 3; grid-row: 2 / 3; }
.item6 { grid-column: 3 / 4; grid-row: 2 / 3; }

 grid-column 是 CSS Grid 布局中的一个属性，用于指定一个网格项目在网格中的列位置。它可以定义项目开始和结束的列线，控制项目跨越的列数。

grid-column: <start-line> / <end-line>;

• 设置起始

.item1 {grid-column: 1 / 3; /* 从第1列线开始，跨越到第3列线 */
}

第一个块状体的末尾线默认为第二个块状体的起始线。 

• 设置跨越

.item2 {grid-column: 2 / span 2; /* 从第2列线开始，跨越2列 */
}

span所定义跨越2列 

 

3.3 设置起始位置

grid-column-start 是 CSS Grid 布局中的一个属性，用于指定网格项目开始在哪一列的网格线。它可以单独使用，也可以和 grid-column-end 配合使用来定义项目跨越的列范围。

.item {grid-column-start:1; /*项目从第一列开始*/grid-column-start: span 2; /* 项目跨越2列，从当前位置往后 */
}

搭配grid-column-end:

.item {grid-column-start: 1; /* 从第1列线开始 */grid-column-end: 4;   /* 到第4列线结束 */
}

4. 网格布局实例

使用HTML编写网页内容

	<body>
<div class="container"><header>This is my lovely blog</header><article><h1>My article</h1><p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitorimperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursusmassa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverraegestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuadaet. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse acimperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duisornare egestas augue ut luctus. Proin blandit quam nec lacus variuscommodo et a urna. Ut id ornare felis, eget fermentum sapien.</p><p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuadaultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sedest. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamustristique elit dolor, sed pretium metus suscipit vel. Mauris ultricieslectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverraquis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociisnatoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p></article><aside><h2>Other things</h2><p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuadaultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sedest.</p></aside><footer>Contact Taoabo@qq.com</footer>
</div></body>

原有HTML文档： 

使用css进行修饰

	<style>.container{display:grid;grid-template-columns: 1fr 3fr;grid-gap:20px;}header{grid-column:1/3;grid-row: 1;}article{grid-column:2;grid-row:2;}aside{grid-column:1;grid-row:2;}footer{grid-column:1/3;grid-row:3;}footer {border-radius: 5px;padding: 10px;background-color: rgb(207, 232, 220);border: 2px solid rgb(79, 185, 227);}header{font-size: 50px;border-radius: 5px;background-color: #90EE90;padding:10px;}</style>

效果展示： 

 

5. 参考资料

网格 - 学习 Web 开发 | MDN 

相关文章：

HTML+CSS - 网页布局之网格布局

1. dispaly设置 display是 CSS 中用于设置元素的显示方式的属性。它决定了元素如何被渲染到页面上。不同的display值会改变元素的显示行为&#xff0c;包括布局、排版以及对其他元素的影响。 其中网格容器是最常用的几种方式之一&#xff0c;在文档中创建类似于网格的效果&…...

编程日记 2024/9/14 11:09:13

基于51单片机的16X16点阵显示屏proteus仿真

地址&#xff1a; https://pan.baidu.com/s/1JQ225NSKweqf1Zlad_f1Mw 提取码&#xff1a;1234 仿真图&#xff1a; 芯片/模块的特点&#xff1a; AT89C52/AT89C51简介&#xff1a; AT89C52/AT89C51是一款经典的8位单片机&#xff0c;是意法半导体&#xff08;STMicroelectro…...

编程日记 2024/9/14 11:07:11

【目标检测数据集】厨房常见的水果蔬菜调味料数据集4910张39类VOC+YOLO格式

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;4910 标注数量(xml文件个数)&#xff1a;4910 标注数量(txt文件个数)&#xff1a;4910 标注…...

编程日记 2024/9/14 11:06:10

在Python中统计字符串中每个字符出现的次数

在Python中统计字符串中每个字符出现的次数 在Python编程中，处理字符串是一个常见的任务。统计字符串中每个字符出现的次数不仅能考察候选人的编程能力，还能展示他们对Python内置数据结构和算法的理解。本文将详细介绍如何编写一个函数来统计字符串中每个字符出现的次数，并…...

编程日记 2024/9/14 11:05:09

关于 vue/cli 脚手架实现项目编译运行的源码解析

1.vue项目运行命令解析 在日常开发中&#xff0c;vue 项目通过vue-cli-service脚手架包将项目运行起来&#xff0c;常用的命令例如&#xff1a; npm run serve npm run build 上述执行命令实际一般对应为项目中 package.json 文件的 scripts属性中编写的脚本命令&#xff0c;在…...

编程日记 2024/9/14 11:01:05

C++笔记---继承（上）

1. 继承的简单介绍 1.1 继承的概念 继承(inheritance)机制是面向对象程序设计使代码可以复用的最重要的手段&#xff0c;它允许我们在保持原有类特性的基础上进行扩展&#xff0c;增加方法(成员函数)和属性(成员变量)&#xff0c;这样产生新的类&#xff0c;称派生类。 继承呈…...

编程日记 2024/9/14 11:00:04

气膜体育馆：为学校打造智能化运动空间—轻空间

随着教育体制的逐步升级&#xff0c;学校在提升学生综合素质方面的需求日益增长&#xff0c;特别是在体育场地方面。气膜体育馆作为一种新型的运动空间形式&#xff0c;正在迅速成为学校体育设施的优选方案。凭借其快速搭建、节能环保等优势&#xff0c;气膜馆在全国各地的校园…...

编程日记 2024/9/14 10:59:03

JVM 调优篇5 jvm性能监控

一 jvm性能监控 1.1 概述 性能诊断是软件工程师在日常工作中需要经常面对和解决的问题&#xff0c;在用户体验至上的今天&#xff0c;解决好应用的性能问题能带来非常大的收益。 体会1&#xff1a;使用数据说明问题&#xff0c;使用知识分析问题&#xff0c;使用工具处理问…...

编程日记 2024/9/14 10:58:02

一. Unity实现虚拟摇杆及屏幕自适应功能

手游里面很多类型的游戏都需要用到遥感功能&#xff0c;例如王者荣耀&#xff0c;和平精英等&#xff0c;之前的摇杆功能都是用类似于Easy Touch的插件进行开发的&#xff0c;今天不借助任何插件来实现虚拟摇杆的功能。 一般虚拟摇杆的组成都是由轮盘和遥感的点组成&#xff0c…...

编程日记 2024/9/14 10:57:01

【达梦数据库】mysql 和达梦 tinyint 与 bit 返回值类型差异

测试环境 mysql5.7.44 达梦2024Q2季度版 前言 在mysql 中存在 tinyint&#xff08;1&#xff09;的用法来实现存储0 1 作为boolean的标识列&#xff1b;但是在达梦并不允许使用 tinyint&#xff08;1&#xff09;来定义列&#xff0c;只能使用 tinyint 即 取值范围为&#xff…...

编程日记 2024/9/14 10:56:00

VUE工程中axios基本使用

安装axios npm install axios -s在main.js中引入 import http from axios Vue.prototype.$http = http将其绑定在VUE的prototype属性中 vue工程目录下，新建config文件夹，在config文件夹下新建index.js export default {...

编程日记 2024/9/14 10:54:59

跨服务器执行PowerShell脚本

本机和远程机都要执行 Enable-PSRemoting -Force 远程端关闭公用网络 Get-NetConnectionProfile Set-NetConnectionProfile -Name "未识别的网络" -NetworkCategory Private 本机和远程机都要执行 winrm quickconfig 将远程机ip加入信任列表 cd WSMan::localhost\…...

编程日记 2024/9/14 10:50:54

linux_L2_linux删除文件

linux 删除文件 在Linux下删除文件有多种实现方法&#xff0c;以下是其中几种常见的方法&#xff1a; 方法一&#xff1a;使用rm命令删除单个文件 rm 文件路径例如&#xff0c;删除当前目录下的文件file.txt&#xff1a; rm file.txtQuestion :当你在Linux系统中使用rm命令删…...

编程日记 2024/9/14 10:49:53

系统架构设计师 - 项目管理

项目管理 项目管理&#xff08;1-3分&#xff0c;案例分析 25分&#xff09;立项管理 ★盈亏平衡分析 范围管理 ★★时间管理 ★★★★概述前导图法 PDM(单代号网络图)箭线图法 ADM(双代号网络图) 了解关键路径法总时差自由时差 甘特图 成本管理 ★挣值管理概述指数计算 软件质…...

编程日记 2024/9/14 10:44:28

Spring Boot基础

项目创建 项目启动 请求响应 RestController 1.返回值处理 RestController&#xff1a;这个注解结合了Controller和ResponseBody的功能。它默认将所有处理请求的方法的返回值直接作为响应体内容返回&#xff0c;主要用于构建RESTful API。返回的数据格式通常是JSON或XML&…...

编程日记 2024/9/14 10:43:27

C语言 | Leetcode C语言题解之第402题移掉K位数字

题目&#xff1a; 题解&#xff1a; char* removeKdigits(char* num, int k) {int n strlen(num), top 0;char* stk malloc(sizeof(char) * (n 1));for (int i 0; i < n; i) {while (top > 0 && stk[top] > num[i] && k) {top--, k--;}stk[top]…...

编程日记 2024/9/14 10:42:26

使用Visual Studio Code配置C/C++开发环境的全面指南

目录 引言 一、准备工作 1. 安装Visual Studio Code 2. 安装C/C编译器 3. 配置环境变量&#xff08;仅Windows用户&#xff09; 二、在VS Code中安装C/C扩展 三、创建您的第一个C/C项目 1. 创建项目文件夹 2. 打开项目文件夹 3. 创建源文件 四、配置任务&#xff08;…...

编程日记 2024/9/14 10:39:24

算法练习题26——多项式输出（模拟）

输入格式 输入共有 2 行 第一行 1 个整数&#xff0c;n&#xff0c;表示一元多项式的次数。 第二行有 n1 个整数&#xff0c;其中第 i 个整数表示第 n−i1 次项的系数&#xff0c;每两个整数之间用空格隔开。 输出格式 输出共 1 行&#xff0c;按题目所述格式输出多项式。…...

编程日记 2024/9/14 10:38:23

卷积神经网络经典模型架构简介

【图书推荐】《PyTorch深度学习与企业级项目实战》-CSDN博客 《PyTorch深度学习与企业级项目实战&#xff08;人工智能技术丛书&#xff09;》(宋立桓&#xff0c;宋立林)【摘要 书评 试读】- 京东图书 (jd.com) ImageNet是一个包含超过1 500万幅手工标记的高分辨率图像的数据…...

编程日记 2024/9/14 10:32:56

【Kubernetes】常见面试题汇总（十三）

目录 39.简述 Kubernetes Scheduler 使用哪两种算法将 Pod 绑定到 worker 节点&#xff1f; 40.简述 Kubernetes kubelet 的作用&#xff1f; 41.简述 Kubernetes kubelet 监控 Worker 节点资源是使用什么组件来实现的&#xff1f; 39.简述 Kubernetes Scheduler 使用哪两种算…...

编程日记 2024/9/14 10:31:55

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

编程新知 2025/11/10 15:33:04

Python爬虫实战：研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代，互联网上存在着海量的信息资源。RSS（Really Simple Syndication）作为一种标准化的信息聚合技术，被广泛用于网站内容的发布和订阅。通过 RSS，用户可以方便地获取网站更新的内容，而无需频繁访问各个网站。 然而，互联网…...

编程新知 2025/8/18 9:54:31

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装&#xff1b;只需暴露 19530&#xff08;gRPC&#xff09;与 9091&#xff08;HTTP/WebUI&#xff09;两个端口&#xff0c;即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

编程新知 2025/11/28 11:02:33

NFT模式：数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

编程新知 2025/12/2 13:11:11

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例，演示如何： 使用 FetchContent 从 GitH…...

编程新知 2025/12/2 11:33:33

优选算法第十二讲：队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

编程新知 2025/12/3 18:27:54

VM虚拟机网络配置（ubuntu24桥接模式）：配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...

编程新知 2025/11/27 22:39:03

DingDing机器人群消息推送

文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人&#xff0c;点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置&#xff0c;详见说明文档 成功后&#xff0c;记录Webhook 2 API文档说明 点击设置说明 查看自…...

编程新知 2025/11/28 12:49:49

iview框架主题色的应用

1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题&#xff0c;无需引入&#xff0c;直接可…...

编程新知 2025/11/29 17:45:08

数据结构：泰勒展开式：霍纳法则（Horner‘s Rule）

目录 &#x1f50d; 若用递归计算每一项&#xff0c;会发生什么&#xff1f; Horners Rule&#xff08;霍纳法则&#xff09; 第一步&#xff1a;我们从最原始的泰勒公式出发 第二步&#xff1a;从形式上重新观察展开式 &#x1f31f; 第三步&#xff1a;引出霍纳法则&…...

编程新知 2025/11/29 22:27:51