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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/423562.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Go】Go语言中延迟函数、函数数据的类型、匿名函数、闭包等高阶函数用法与应用实战

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

Mysql | 知识 | 理解是怎么加锁的

文章目录 一、怎么加行级锁的&#xff1f;二、唯一索引加锁2.1 唯一索引等值查询1、记录存在的情况2、记录不存在的情况 2.2 唯一索引范围查询a. 针对「大于」的范围查询b. 针对「大于等于」的范围查询的情况。c. 「小于」范围查询&#xff0c;记录「不存在」表中的情况d. 「小…

音乐革命:揭秘树莓派如何重塑 Korg 合成器的未来

采用快速紧凑的 Raspberry Pi 计算模块3&#xff08;Raspberry Pi Compute Module 3&#xff09;的简易设置&#xff0c;为Korg备受推崇的高端乐器提供了一种经济高效的解决方案。 解决方案&#xff1a;Compute Module 3 企业规模&#xff1a;大型企业 行业&#xff1a;音乐…

uniapp小程序,使用腾讯地图获取定位

本篇文章分享一下在实际开发小程序时遇到的需要获取用户当前位置的问题&#xff0c;在小程序开发过程中经常使用到获取定位功能。uniapp官方也提供了相应的API供我们使用。 官网地址&#xff1a;uni.getLocation(OBJECT)) 官网获取位置的详细介绍这里就不再讲述了&#xff0c;大…

【LeetCode】每日一题 2024_9_14 从字符串中移除星号(模拟)

前言 每天和你一起刷 LeetCode 每日一题~ LeetCode 启动&#xff01; 今天的题目曾经的我做过了 . . . 又是复习的一天 题目&#xff1a;从字符串中移除星号 代码与解题思路 func removeStars(s string) string {// 本题的核心&#xff1a;生成的输入保证总是可以执行题面中…

大数据-136 - ClickHouse 集群 表引擎详解1 - 日志、Log、Memory、Merge

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…

【绿盟科技盟管家-注册/登录安全分析报告】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞…

秒懂:父子进程与bash(命令行参数)的关系

情景解析&#xff1a; 执行以下代码&#xff1a; #include<string.h> #include<unistd.h> int g_val 100000;int main() {int key7;printf("I am father process, pid: %d, ppid: %d, g_val: %d\n", getpid(), getppid(), g_val);sleep(5);pid_t id f…

现代 Web 开发全攻略:Node.js、npm、Webpack、Vue.js 和 Element-UI 的实战指南

现代 Web 开发全攻略&#xff1a;Node.js、npm、Webpack、Vue.js 和 Element-UI 的实战指南 一 . Node.js1.1 什么是 Node.js ?1.2 Node.js 的安装1.3 快速入门1.3.1 控制台输出1.3.2 使用函数1.3.3 模块化编程 二 . npm 包管理器2.1 什么是 npm ?2.2 npm 命令2.2.1 初始化工…

护眼灯品牌排行第一名出炉!盘点2024年世界公认十大护眼灯

中国拥有全球最多的近视人口&#xff0c;我国学生的近视发病率位居世界第二&#xff0c;人数更是居于首位。如今&#xff0c;越来越多的孩子出现近视现象&#xff0c;许多家长认为这是由于繁重的课业和不健康的用眼习惯所致&#xff0c;但实际上&#xff0c;他们往往忽视了一个…

数据分析-前期数据处理

今天找到一份关于医学体检的数据&#xff0c;在数据分析前期工作需要对数据做处理&#xff0c;在这里我们对原始数据做一些处理&#xff0c;将数据处理为可分析的标准数据。下一篇文章做数据的分析。数据想要获取的话可以到我的资源下载。1 数据读取 import pandas as pd data…

SQL Server详细使用教程(包含启动SQL server服务、建立数据库、建表的详细操作) 非常适合初学者

文章目录 目录 前言 一、启动SQL server服务的三种方法 1.不启动SQL server服务的影响 2.方法一&#xff1a;利用cmd启动SQL server服务 3.方法二&#xff1a;利用SQL Server配置管理器启动SQL server服务 4.方法三&#xff1a;在服务管理器中启动SQL server服务 二、建立数据库…

震撼!AI实时生成游戏,每秒20帧,谷歌扩散模型最新突破一夜爆火,附论文介绍和GitHub代码

震撼&#xff01;AI实时生成游戏&#xff0c;每秒20帧&#xff0c;谷歌扩散模型最新突破一夜爆火&#xff0c;附论文介绍和GitHub代码。 “比Sora还震撼”&#xff0c;AI可以实时生成游戏了&#xff01; 谷歌DeepMind打造出了首个完全AI驱动的实时游戏引擎——GameNGen。 在单…

SpringBoot集成MyBatis-PlusDruid

目录 MyBatis-Plus简介 实例演示 创建Springboot项目 初始化Springboot项目 添加关键依赖 application.properties添加相关配置 启动类 编写实体类 编写mapper接口 条件构造器 分页插件 自定义 SQL 映射 MyBatis-Plus简介 MyBatis-Plus简介‌MyBatis-Plus‌&…

RDD2022 道路瑕疵检测数据集

RDD2022 道路瑕疵数据集 txt标签或者xml标签 一共23767张图片 D00 D01 D20 D40四类 D00纵向裂缝 D10横向裂缝 D20网状裂缝 D40坑洞。 RDD2022 道路瑕疵检测数据集介绍 数据集概述 RDD2022&#xff08;Road Defect Detection 2022&#xff09;是一个专门用于道路瑕疵检测的数…

力扣之1777.每家商店的产品价格

文章目录 1. 1777.每家商店的产品价格1.1 题干1.2 建表1.3 题解1.4 结果截图 1. 1777.每家商店的产品价格 1.1 题干 表&#xff1a;Products -------------------- | Column Name | Type | -------------------- | product_id | int | | store | enum | | price | int | ---…

HarmonyOS 是如何实现一次开发多端部署 -- HarmonyOS自学1

一次开发多端部署遇到的几个关键问题 为了实现“一多”的目标&#xff0c;需要解决如下三个基础问题&#xff1a; 问题1&#xff1a;页面如何适配 不同设备间的屏幕尺寸、色彩风格等存在差异&#xff0c;页面如何适配。 问题2&#xff1a;功能如何兼容 不同设备的系统能力…

《深度学习》OpenCV 高阶 图像直方图、掩码图像 参数解析及案例实现

目录 一、图像直方图 1、什么是图像直方图 2、作用 1&#xff09;分析图像的亮度分布 2&#xff09;判断图像的对比度 3&#xff09;检测图像的亮度和色彩偏移 4&#xff09;图像增强和调整 5&#xff09;阈值分割 3、举例 二、直方图用法 1、函数用法 2、参数解析…

C++——深部解析哈希

好久不见给大家分享一张图片吧 目录 前言 二、库文件 1、哈希冲突 2 哈希函数 3、闭散列 三 、闭散列的实现和底层逻辑 1、哈希表&#xff08;闭散列&#xff09;的定义 2、哈希表&#xff08;闭散列&#xff09;的插入 3、哈希表&#xff08;闭散列&#xff09;的查找 4.哈希表…

【Unity踩坑】No cloud project ID was found by the Analytics SDK

在编译默认的URP 2D项目时&#xff0c;出现这样一个错误&#xff1a;No cloud project ID was found by the Analytics SDK. This means Analytics events will not be sent. Please make sure to link your cloud project in the Unity editor to fix this problem. 原因&…