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

CSS3 grid网格布局

news 2025/10/31 5:58:20

文章目录

CSS3 grid网格布局
- 概述
- grid属性说明
- 使用
- - grid-template-rows & grid-template-columns 定义行高和列宽
  - grid-auto-flow 定义项目的排列顺序
  - grid-auto-rows & grid-auto-columns 定义多余网格的行高和列宽
  - row-gap & column-gap 设置行间距和列间距
  - gap 简写形式
  - grid-template-areas 定义区域
  - justify-items & align-items 设置项目的水平位置和垂直位置
  - place-items 简写形式
  - align-content & justify-content 设置整个内容的位置
  - place-content 简写形式
  - grid-row-start & grid-row-end & grid-column-start & grid-column-end 指定项目位置
  - grid-column & grid-row 简写形式
  - grid-area 简写形式
  - align-self & justify-self 设置项目的垂直位置和水平位置
  - place-self 简写形式
- 案例
- - 圣杯布局

CSS3 grid网格布局

概述

Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。

grid元素是块元素。

grid属性说明

在这里插入图片描述

容器属性

属性	说明
grid-template-rows	定义行高
grid-template-columns	定义列宽
grid-auto-flow	定义项目的排列顺序
grid-auto-rows	定义多余网格的行高
grid-auto-columns	定义多余网格的列宽
row-gap	行间距
column-gap	列间距
gap	row-gap和column-gap的简写
grid-template-areas	定义区域
justify-items	设置项目的水平位置
align-items	设置项目的垂直位置
place-items	align-items和justify-items的简写
align-content	设置整个内容区域的垂直位置
justify-content	设置整个内容区域的水平位置
place-content	align-content和justify-content的简写
grid-template	grid-template-columns、grid-template-rows 和 grid-template-areas的简写

项目属性

属性	说明
grid-row-start & grid-row-end & grid-column-start & grid-column-end	指定项目位置
grid-column	grid-column-start 和 grid-column-end 的合并简写形式
grid-row	grid-row-start 和 grid-row-end 的合并简写形式
grid-area	grid-row-start、grid-column-start、grid-row-end、grid-column-end 的合并简写形式
align-self	项目的垂直位置
justify-self	项目的水平位置
place-self	align-self 和 justify-self的简写形式

使用

grid-template-rows & grid-template-columns 定义行高和列宽

grid-template-rows和 grid-template-columns属性取值

属性值	说明
px	固定值
%	百分比
fr	片段，分配剩余空间
auto	先于fr计算，获取必要的最小空间
repeat()	简化重复值

固定值使用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.container {display: grid;grid-template-rows: 50px 50px 50px;grid-template-columns: 50px 50px 50px;}.item {display: flex;align-items: center;justify-content: center;color: white;font-size: 12px;}.item-1 {background-color: lightseagreen;}.item-2 {background-color: lightsteelblue;}.item-3 {background-color: lightgreen;}.item-4 {background-color: #ffd200;}.item-5 {background-color: lightskyblue;}.item-6 {background-color: pink;}.item-7 {background-color: gray;}.item-8 {background-color: orange;}.item-9 {background-color: yellowgreen;}</style></head><body><div class="wrap"><div class="item item-1">1</div><div class="item item-2">2</div><div class="item item-3">3</div><div class="item item-4">4</div><div class="item item-5">5</div><div class="item item-6">6</div><div class="item item-7">7</div><div class="item item-8">8</div><div class="item item-9">9</div></div></body>
</html>

在这里插入图片描述

百分比使用

.container {display: grid;width: 150px;height: 150px;grid-template-rows: 33.33% 33.33% 33.33%;grid-template-columns: 33.33% 33.33% 33.33%;
}

在这里插入图片描述

fr使用

.container {display: grid;width: 150px;height: 150px;grid-template-rows: 1fr 1fr 1fr;grid-template-columns: 1fr 1fr 1fr;
}

在这里插入图片描述

.container {display: grid;width: 150px;height: 150px;grid-template-rows: 20px 1fr 20px;grid-template-columns: 20px 1fr 20px;
}

在这里插入图片描述

auto使用

.container {display: grid;width: 150px;height: 150px;grid-template-rows: 20px auto 20px;grid-template-columns: 20px auto 20px;
}

在这里插入图片描述

.container {display: grid;width: 150px;height: 150px;grid-template-rows: auto 1fr 50px;grid-template-columns: auto auto auto;
}

在这里插入图片描述

repeat()使用

.container {display: grid;width: 150px;height: 150px;grid-template-rows: repeat(3, 50px);grid-template-columns: repeat(3, 50px);
}

在这里插入图片描述

grid-auto-flow 定义项目的排列顺序

grid-auto-flow属性取值

属性	说明
row	先填入第一行
column	先填入第一列
row dense	按行填充空白
column dense	按列填充空白

使用

.container {
display: grid;
width: 150px;
height: 150px;
grid-template-rows: repeat(3, 50px);
grid-template-columns: repeat(3, 50px);
grid-auto-flow: row;
}

在这里插入图片描述

.container {display: grid;width: 150px;height: 150px;grid-template-rows: repeat(3, 50px);grid-template-columns: repeat(3, 50px);grid-auto-flow: column;
}

在这里插入图片描述

.container {display: grid;width: 150px;height: 150px;grid-template-rows: repeat(3, 50px);grid-template-columns: repeat(3, 50px);grid-auto-flow: row dense;
}.item-1 {grid-column-start: 1;grid-column-end: 3;
}

在这里插入图片描述

.container {display: grid;width: 150px;height: 150px;grid-template-rows: repeat(3, 50px);grid-template-columns: repeat(3, 50px);grid-auto-flow: column dense;
}.item-1 {grid-column-start: 1;grid-column-end: 3;
}

在这里插入图片描述

grid-auto-rows & grid-auto-columns 定义多余网格的行高和列宽

使用

.container {display: grid;width: 150px;height: 150px;grid-template-rows: repeat(3, 50px);grid-template-columns: repeat(3, 50px);grid-auto-rows: 100px;grid-auto-columns: 100px;
}

在这里插入图片描述

row-gap & column-gap 设置行间距和列间距

.container {display: grid;width: 150px;height: 150px;grid-template-rows: repeat(3, 50px);grid-template-columns: repeat(3, 50px);row-gap: 10px;column-gap: 40px;
}

在这里插入图片描述

gap 简写形式

.container {display: grid;width: 150px;height: 150px;grid-template-rows: repeat(3, 50px);grid-template-columns: repeat(3, 50px);gap: 10px 40px;
}

在这里插入图片描述

grid-template-areas 定义区域

.container {display: grid;grid-template-rows: repeat(3, 50px);grid-template-columns: repeat(3, 50px);grid-template-areas:"a b c""e f g""h i j";
}.item-1 {grid-area: c;
}.item-3 {grid-area: a;
}

在这里插入图片描述

justify-items & align-items 设置项目的水平位置和垂直位置

justify-items & align-items属性取值

属性值	说明
stretch	默认值，拉伸
start	开始位置
center	居中位置
end	结束位置

使用

.container {display: grid;grid-template-rows: repeat(3, 50px);grid-template-columns: repeat(3, 50px);justify-items: center;align-items: center;
}

在这里插入图片描述

place-items 简写形式

.container {display: grid;grid-template-rows: repeat(3, 50px);grid-template-columns: repeat(3, 50px);place-items: center center;
}

在这里插入图片描述

align-content & justify-content 设置整个内容的位置

align-content & justify-content属性取值

属性	说明
stretch	默认值，没有指定大小时，拉伸
start	开始位置
center	居中位置
end	结束位置
space-around	每个项目的间隔相等
space-between	每个项目的间隔相等，项目与边框之间没有间隔
space-evenly	每个项目的间隔相等，项目与边框之间也是一样的间隔

使用

.container {display: grid;height: 500px;border: 1px dashed green;grid-template-rows: repeat(3, 50px);grid-template-columns: repeat(3, 50px);align-content: center;justify-content: center;
}

在这里插入图片描述

place-content 简写形式

.container {display: grid;height: 500px;border: 1px dashed green;grid-template-rows: repeat(3, 50px);grid-template-columns: repeat(3, 50px);place-content: center;
}

在这里插入图片描述

grid-row-start & grid-row-end & grid-column-start & grid-column-end 指定项目位置

属性取值

属性值	说明
number	从第几个网格线开始，到第几个网格线结束
name	需要先定义网格线
span number	表示跨域几个网格

使用

.container {display: grid;grid-template-rows: repeat(3, 50px);grid-template-columns: repeat(3, 50px);
}.item-1 {grid-row-start: 1;grid-row-end: 3;grid-column-start: 1;grid-column-end: 3;
}

在这里插入图片描述

.container {display: grid;grid-template-rows: [c1] 50px [c2] 50px [c3] 50px [c4];grid-template-columns: [r1] 50px [r2] 50px [r3] 50px [r4];
}.item-1 {grid-row-start: c1;grid-row-end: c3;grid-column-start: r1;grid-column-end: r3;
}

在这里插入图片描述

.container {display: grid;grid-template-rows: repeat(3, 50px);grid-template-columns: repeat(3, 50px);
}.item-1 {grid-row-start: span 2;grid-column-start: span 2;
}

在这里插入图片描述

grid-column & grid-row 简写形式

grid-column 是 grid-column-start 和 grid-column-end 的合并简写形式

grid-row 是 grid-row-start 和 grid-row-end 的合并简写形式

.container {display: grid;grid-template-rows: repeat(3, 50px);grid-template-columns: repeat(3, 50px);
}.item-1 {grid-column: 1 / 3;grid-row: 1 / 3;
}

在这里插入图片描述

grid-area 简写形式

.container {display: grid;grid-template-rows: repeat(3, 50px);grid-template-columns: repeat(3, 50px);
}.item-1 {grid-area: 1/1/3/3;
}

在这里插入图片描述

align-self & justify-self 设置项目的垂直位置和水平位置

属性取值

属性值	说明
stretch	默认值，拉伸
start	开始位置
center	居中位置
end	结束位置

使用

.container {display: grid;grid-template-rows: repeat(3, 50px);grid-template-columns: repeat(3, 50px);
}.item-1 {align-self: end;justify-self: end;
}

在这里插入图片描述

place-self 简写形式

.container {display: grid;grid-template-rows: repeat(3, 50px);grid-template-columns: repeat(3, 50px);
}.item-1 {place-self: end;
}

在这里插入图片描述

案例

圣杯布局

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>圣杯布局（grid）</title><style>* {padding: 0;margin: 0;}html {width: 100%;height: 100%;}body {display: grid;grid-template-rows: 80px 1fr 80px;grid-template-columns: 200px auto 200px;grid-template-areas:"header header header""left main right""footer footer footer";height: 100%;}.header {grid-area: header;background-color: red;}.left {grid-area: left;background-color: yellow;}.main {grid-area: main;background-color: aqua;}.right {grid-area: right;background-color: bisque;}.footer {grid-area: footer;background-color: gray;}.grid-center {display: grid;justify-items: center;align-items: center;}</style></head><body><header class="header grid-center">header</header><div class="left grid-center">left</div><div class="main grid-center">main</div><div class="right grid-center">right</div><footer class="footer grid-center">footer</footer></body>
</html>

CSS3 grid网格布局

文章目录 CSS3 grid网格布局概述grid属性说明使用grid-template-rows & grid-template-columns 定义行高和列宽grid-auto-flow 定义项目的排列顺序grid-auto-rows & grid-auto-columns 定义多余网格的行高和列宽row-gap & column-gap 设置行间距和列间距gap 简写形…...

编程日记 2023/6/1 5:50:38

SPSS如何进行均值比较和T检验之案例实训？

文章目录 0.引言1.均值过程2.单样本T检验3.独立样本T检验4.成对样本T检验 0.引言因科研等多场景需要进行数据统计分析，笔者对SPSS进行了学习，本文通过《SPSS统计分析从入门到精通》及其配套素材结合网上相关资料进行学习笔记总结，本文对均值…...

编程日记 2023/6/1 5:54:50

Packet Tracer - 配置交换机端口安全

Packet Tracer - 配置交换机端口安全地址分配表设备接口 IP 地址子网掩码 S1 VLAN 1 10.10.10.2 255.255.255.0 PC1 NIC 10.10.10.10 255.255.255.0 PC2 NIC 10.10.10.11 255.255.255.0 非法笔记本电脑 NIC 10.10.10.12 255.255.255.0 目标第 1 部…...

编程日记 2023/6/1 5:59:05

一图看懂 aiohttp 模块：基于 asyncio 的异步HTTP网络库, 资料整理+笔记（大全）

本文由大侠(AhcaoZhu)原创，转载请声明。链接: https://blog.csdn.net/Ahcao2008 一图看懂 aiohttp 模块：基于 asyncio 的异步HTTP网络库, 资料整理笔记（大全） 摘要模块图类关系图模块全展开【aiohttp】统计常量模块1 aiohttp.hd…...

编程日记 2023/6/1 6:03:21

Linux + 香橙派 + V4L2 + http 实现远程监控摄像头在网页端显示

项目场景： 项目需求，需要做一个基于边缘端的人脸识别远程监控摄像头并在网页前端展示 ，这里采用国产香橙派作为边缘计算终端，安装ubuntu系统，系统中采用v4l2接口对摄像头进行获取，当客户端通过网页进行请求…...

编程日记 2023/6/1 6:08:08

《编码——隐匿在计算机软硬件背后的语言》精炼——第15-16章（十六进制，RAM）

“学习如春起之苗，不见其增，日有所长。” —— 宋代朱熹文章目录十六进制十六进制概述十六进制表字节到十六进制存储器特定的读功能特定的写功能RAM大型RAM阵列十六进制十六进制概述十六进制是一种适用于计算机的进制法。在十进制中，…...

编程日记 2023/6/1 6:12:39

leetcode.1376 通知所有员工所需的时间 - bfs/dfs + 树

1376. 通知所有员工所需的时间目录一、bfs 二、dfs 题目： 公司里有 n 名员工，每个员工的 ID 都是独一无二的，编号从 0 到 n - 1。公司的总负责人通过 headID 进行标识。在 manager 数组中，每个员工都有一个直属负责人&#x…...

编程日记 2023/6/1 6:17:23

AtCoder Beginner Contest 300——A-G题讲解

蒟蒻来讲题，还望大家喜。若哪有问题，大家尽可提！ Hello, 大家好哇！本初中生蒟蒻讲解一下AtCoder Beginner Contest 300这场比赛的A-G题！ A - N-choice question 原题 Problem Statement Given integers A A A and…...

编程日记 2023/6/1 6:21:50

Go：值与指针

1. 计算机中的值在百万年的演化历史中，人类对事物的属性进行了抽象，有了数量、精度、信息等概念的表示，对应的我们称之为整数、小数、文本文字等。计算机出现后，我们使用计算机对真实世界的问题进行建模，通过计算机的…...

编程日记 2023/6/1 6:26:34

【Linux】进程学习（2）---理解进程操作

文章目录查看进程通过系统目录查看通过ps命令查看通过系统调用获取进程标识符通过系统调用创建进程初识fork函数fork函数的返回值进程状态阻塞与运行状态Linux内核源码中的进程状态运行状态-R浅度睡眠状态-S深度睡眠状态-D暂停状态-T僵尸状态-Z死亡状态-X 查看进程通过系统…...

编程日记 2023/6/1 6:31:16

基于springcloud实现的医院信息系统

访问【WRITE-BUG数字空间】_[内附完整源码和文档] 医疗信息就诊系统，系统主要功能按照数据流量、流向及处理过程分为临床诊疗、药品管理、财务管理、患者管理。诊疗活动由各工作站配合完成，并将临床信息进行整理、处理、汇总、统计、分析等。本系统包括以…...

编程日记 2023/6/1 8:04:04

一、简单工厂模式上代码 public class FoodFactory {public static Food makeFood(String name) {if (name.equals("noodle")) {Food noodle new LanZhouNoodle();noodle.addSpicy("more");return noodle;} else if (name.equals("chicken")…...

编程日记 2023/6/1 8:14:28

JAVA12新特性

JAVA12新特性概述 2019年3月19日,java12正式发布了,总共有8个新的JEP(JDK Enhancement Proposals) JDK 12 is the open-source reference implementation of version 12 of the Java SE12 Platform as specified by by JSR 386 in the Java Community Process. JDK 12 reac…...

编程日记 2023/6/1 6:38:45

Nginx 静态文件、反向代理、负载均衡、缓存、SSL/TLS 加密、gzip 压缩等等

Nginx的功能 1. 静态文件服务器2. 反向代理服务器3. 负载均衡4. 缓存5. SSL/TLS 加密6. URL 重写7. HTTP/28. WebSocket9. 反向代理缓存10. 安全限制11. gzip 压缩12. 请求限速13. 日志记录14. SSL 证书续订 Nginx 是一个高性能的开源 Web 服务器和反向代理服务器，它…...

编程日记 2023/6/1 6:42:47

Linux设备驱动模型（一）

一、sysfs文件系统 sysfs是一个虚拟文件系统，将内核总的设备对象的链接关系，以文件目录的方式表示出来，并提对设备提供读写接口。二、kobject kobject是内核中对象表示的基类，可以认为所有的内核对象都是一个kobject kobject单…...

编程日记 2023/6/1 6:51:05

【Python入门篇】——Python基础语法（标识符与运算符）

作者简介： 辭七七，目前大一，正在学习C/C，Java，Python等作者主页： 七七的个人主页文章收录专栏： Python入门，本专栏主要内容为Python的基础语法，Python中的选择循环语句…...

编程日记 2023/6/1 6:58:33

扩展 VirtualBox 已分配磁盘的方法

扩展 VirtualBox 已分配磁盘的方法第一步：用VirtualBox命令行调整已分配磁盘的大小第二步：用windows磁盘管理工具扩展磁盘空间其他无关配置如何选择虚拟机的芯片组注意：扩展操作只支持 vdi 格式的磁盘，就是VirtualBox自己的磁盘…...

编程日记 2023/6/1 6:46:59

【LeetCode】646. 最长数对链

646. 最长数对链（中等） 思路这道题和 300. 最长递增子序列类似，我们可以定义 dp 数组，其中 dp[i] 表示以 i 结尾的子序列的性质。在处理好每个位置后，统计一遍各个位置的结果即可得到题目要求的结果。但是题目中强…...

编程日记 2023/6/1 6:54:59

Makefile教程（Makefile的结构）

文章目录前言一、Makefile的结构二、深入案例三、Makefile中的一些技巧总结前言一、Makefile的结构 Makefile 通常由一系列规则组成，每条规则定义了如何从源文件生成目标文件。每个规则又由目标、依赖和命令三部分组成。下面是 Makefile 规则的基本结构&…...

编程日记 2023/6/1 7:02:51

SpringMVC(后)SSM整合

10、文件上传和下载 10.1、文件下载 ResponseEntity用于控制器方法的返回值类型，该控制器方法的返回值就是响应到浏览器的响应报文使用ResponseEntity实现下载文件的功能 RequestMapping("/testDown") public ResponseEntity<byte[]> testResp…...

编程日记 2023/6/1 7:07:10

接口测试中缓存处理策略

在接口测试中，缓存处理策略是一个关键环节，直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性，避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明： 一、缓存处理的核…...

编程新知 2025/10/30 10:46:33

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧一、链表基础概念与内核链表优势1.1 为什么使用链表？1.2 Linux 内核链表与用户态链表的区别二、内核链表结构与宏解析常用宏/函数三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

编程新知 2025/8/28 9:42:18

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet，点击确认后如下提示最终上报fail 解决方法内核升级导致，需要在新内核下重新下载编译安装查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

编程新知 2025/10/26 16:14:26

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码，专为学校招生场景量身打造，功能实用且操作便捷。从技术架构来看，ThinkPHP提供稳定可靠的后台服务，FastAdmin加速开发流程，UniApp则保障小程序在多端有良好的兼…...

编程新知 2025/10/19 10:09:01

Mac软件卸载指南，简单易懂！

刚和Adobe分手，它却总在Library里给你写"回忆录"？卸载的Final Cut Pro像电子幽灵般阴魂不散？总是会有残留文件，别慌！这份Mac软件卸载指南，将用最硬核的方式教你"数字分手术"&#xff0…...

编程新知 2025/10/27 13:40:44

ETLCloud可能遇到的问题有哪些？常见坑位解析

数据集成平台ETLCloud，主要用于支持数据的抽取（Extract）、转换（Transform）和加载（Load）过程。提供了一个简洁直观的界面，以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

编程新知 2025/10/27 15:07:18

C++.OpenGL （10/64）基础光照（Basic Lighting）

基础光照（Basic Lighting）冯氏光照模型（Phong Lighting Model） #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

编程新知 2025/10/29 18:00:42