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

grid宫格布局新手快捷上手-f

news 文章来源：https://blog.csdn.net/weixin_44599143/article/details/129262720 2025/2/1 11:02:39

前言

grid 网上有很多，但都是大而全的，感觉新人上手很吃力，本文仅以最快捷的方式进行介绍，如何使用grid宫格布局
本文是新人上手，若想了解更多grid布局，请阅读其他文章

使用

声明布局

display: grid;

声明排版

fr

此单位相当于把横向或纵向的内容进行分配
如：
1fr 2fr 1fr
每个单位所占百分比应当为1/（1+2+1）=1/4

横向

    grid-template-columns: 1fr 2px 5fr;

此demo意思为，横向有三个隔断，分别是1个单位，2px，5个单位

纵向

    grid-template-rows: 2fr 1fr 2fr 2px 1fr;

此demo意思为，纵向有五个隔断，分别是2个单位，1个单位，2个单位，2px，1个单位

得到布局

由上诉示例，得到如下宫格

width:1fr;
height:2fr		width:2px ;
height:2fr		width:5fr;
height:2fr
width:1fr;
height:1fr		width:2px ;
height:1fr		width:5fr;
height:1fr
width:1fr;
height:2fr		width:2px ;
height:2fr		width:5fr;
height:2fr
width:1fr;
height:2px		width:2px ;
height:2px		width:5fr;
height:2px
width:1fr;
height:1fr		width:2px ;
height:1fr		width:5fr;
height:1fr

声明空间

在一些业务里，可能并不是一个内容只占一个空间，他可能占用两三个宫格

    grid-template-areas:'left-top vertical right-top''left-top vertical right-top''left-bottom vertical right-top''left-bottom vertical horizontal''left-bottom vertical right-bottom';

如此可以比较形象的声明所占宫格，例如left-top，他是可以自己去跨越两个宫格的，而不是在两个宫格内独立显示两块内容

分配空间

在待使用的空间上进行命名即可

    .left-top {grid-area: left-top;}.right-top {grid-area: right-top;}.left-bottom {grid-area: left-bottom;}.right-bottom {grid-area: right-bottom;}.vertical {grid-area: vertical;}.horizontal {grid-area: horizontal;}

汇总

本文主要是对新人的快速上手进行教学，将以上样式汇总后，可以得到如下

  .container {display: grid;grid-template-columns: 1fr 2px 5fr;grid-template-rows: 2fr 1fr 2fr 2px 1fr;grid-template-areas:'left-top vertical right-top''left-top vertical right-top''left-bottom vertical right-top''left-bottom vertical horizontal''left-bottom vertical right-bottom';}.left-top {grid-area: left-top;}.right-top {grid-area: right-top;}.left-bottom {grid-area: left-bottom;}.right-bottom {grid-area: right-bottom;}.vertical {grid-area: vertical;}.horizontal {grid-area: horizontal;}

优化示例

<html>
<head>
<meta charset="utf-8"> 
<style>.container {height:500px;width: 500px;display: grid;grid-template-columns: 1fr 2fr 5fr;grid-template-rows: 2fr 1fr 2fr 1fr 1fr;grid-template-areas:'left-top vertical right-top''left-top vertical right-top''left-bottom vertical right-top''left-bottom horizontal horizontal''left-bottom right-bottom right-bottom';}.left-top {grid-area: left-top;background:red;}.right-top {grid-area: right-top;background:blue;}.left-bottom {grid-area: left-bottom;background:green;}.right-bottom {grid-area: right-bottom;background:yellow;}.vertical {grid-area: vertical;background:pink;}.horizontal {grid-area: horizontal;background:black;}
</style>
</head>
<body>
<div class="container"><div class="left-top">1</div><div class="right-top">2</div><div class="left-bottom">3</div>  <div class="right-bottom">4</div><div class="vertical">5</div><div class="horizontal">6</div>
</div></body>
</html>

在这里插入图片描述

相关文章：

grid宫格布局新手快捷上手-f

前言 grid 网上有很多&#xff0c;但都是大而全的&#xff0c;感觉新人上手很吃力&#xff0c;本文仅以最快捷的方式进行介绍&#xff0c;如何使用grid宫格布局 本文是新人上手&#xff0c;若想了解更多grid布局&#xff0c;请阅读其他文章 使用 声明布局 display: grid;声…...

编程日记 2023/2/28 16:45:17

面试必刷101 Java题解 -- part 3

part1 – https://blog.csdn.net/qq_41080854/article/details/129204480 part2 – https://blog.csdn.net/qq_41080854/article/details/129224785 面试必刷101 Java题解 -- part 3动规五部曲71、斐波那契数列72、跳台阶73、最小花费爬楼梯74、最长公共子序列(二)75、最长公共…...

编程日记 2023/2/28 16:44:01

干货满满！MES的简介和运用

导读 谈及MES必须先谈生产&#xff0c;生产体系模型如图所示&#xff0c;涉及人、财、物、信息等资源&#xff0c;产、供、销等环节&#xff0c;以及供应商、客户、合作伙伴等。 其中&#xff0c;生产管理是通过对生产系统的战略计划、组织、指挥、实施、协调、控制等活动&…...

编程日记 2023/2/28 16:42:52

【ElasticSearch系列-01】初识以及安装elasticSearch

elasticSearch入门和安装一&#xff0c;elasticSearch入门1&#xff0c;什么是elasticSearch2&#xff0c;elasticSearch的底层优点2.1&#xff0c;全文检索2.2&#xff0c;倒排索引2.2.1&#xff0c;正排索引2.2.2&#xff0c;倒排索引2.2.3&#xff0c;倒排索引解决的问题2.2…...

编程日记 2023/2/28 16:41:45

【Leedcode】栈和队列必备的面试题（第一期）

栈和队列必备的面试题&#xff08;第一期&#xff09; 文章目录栈和队列必备的面试题&#xff08;第一期&#xff09;一、题目二、思路&#xff08;图解&#xff09;三、存在的问题与隐患&#xff08;报错提示&#xff09;&#xff08;1&#xff09;s中只有右括号&#xff0c;无…...

编程日记 2023/2/28 16:40:35

Unity 渲染流程管线

渲染流程图可以把它理解为一个流程&#xff0c;就是我们告诉GPU一堆数据&#xff0c;最后得出来一副二维图像&#xff0c;而这些数据就包括了”视点、三维物体、光源、照明模型、纹理”等元素。参考如下图(来自视频)CPU应用阶段剔除视锥剔除由Unity依据Camera直接完成&#xff…...

编程日记 2023/2/28 16:39:24

c++之引用

目录 引用的概念 引用做函数参数 引用的本质 常引用 引用的概念 在c中新增加了引用的概念&#xff0c;引用可以看作一个已定义变量的别名。 引用的语法&#xff1a;Type &name var; int main() {int a 10;int &b a;printf("b%d\n", b);printf(&quo…...

编程日记 2023/2/28 16:38:15

Java-扑克牌的创建以及发放

Java-扑克牌的创建以及发放题目&#xff1a;创建一个扑克牌(不需要包含大小王)&#xff0c;分别分发给3个人&#xff0c;一个人发5张牌&#xff0c;输出结果要求包含全套牌(52张牌)&#xff0c;以及3个人各自的牌的花色以及数字。1.扑克牌的源代码2.扑克牌运行结果3.扑克牌代码…...

编程日记 2023/2/28 16:37:03

华为OD机试题，用 Java 解【开放日活动】问题

最近更新的博客 华为OD机试题，用 Java 解【停车场车辆统计】问题华为OD机试题，用 Java 解【字符串变换最小字符串】问题华为OD机试题，用 Java 解【计算最大乘积】问题华为OD机试题，用 Java 解【DNA 序列】问题华为OD机试 - 组成最大数（Java） | 机试题算法思路 【2023】使…...

编程日记 2023/2/28 16:35:53

yarn run serve报错Error: Cannot find module ‘@vue/cli-plugin-babel‘ 的解决办法

问题概述 关于这个问题&#xff0c;是在构建前端工程的时候遇到的&#xff0c;项目构建完成后&#xff0c;“yarn run serve”启动项目时&#xff0c;出现的问题&#xff1a;“ Error: Cannot find module ‘vue/cli-plugin-babel‘ ” 如下图&#xff1a; 具体信息如下&…...

编程日记 2023/2/28 16:34:41

【LeetCode】剑指 Offer（11）

目录 题目&#xff1a;剑指 Offer 29. 顺时针打印矩阵 - 力扣&#xff08;Leetcode&#xff09; 题目的接口&#xff1a; 解题思路&#xff1a; 代码&#xff1a; 过啦&#xff01;&#xff01;&#xff01; 写在最后&#xff1a; 题目&#xff1a;剑指 Offer 29. 顺时针…...

编程日记 2023/2/28 16:33:32

【英语】托福单词 近义/形近 分类汇总（更新中......）

transition 转变 过渡&#xff1b; transmit 传送&#xff08;信息、信号&#xff09; 传播&#xff08;疾病&#xff09; 传达&#xff08;思想&#xff09; transaction 交易 transact 做业务 做交易 translucent 半透明的 transparent 透明的 vague 模糊的 含糊的 笼统的 op…...

编程日记 2023/2/28 16:32:22

面试了一个32岁的程序员，一个细节就看出来是培训班的····

首先&#xff0c;我说一句&#xff1a;培训出来的&#xff0c;优秀学员大有人在&#xff0c;我不希望因为带着培训的标签而无法达到用人单位和候选人的双向匹配&#xff0c;是非常遗憾的事情。 最近&#xff0c;在网上看到这样一个留言&#xff0c;引发了程序员这个圈子不少的…...

编程日记 2023/2/28 16:31:04

Qt软件开发: 编写MQTT客户端连接各大物联网平台（主题订阅、发布）

一、前言 最近几年物联网发展的比较迅速，国内各大厂商都推出物联网服务器，面向设备厂商、个人开发者、提供云端一体的设备智能化服务，利用现成的物联网服务器可以快速实现IoT设备智能化的需求。方便企业、个人接入设备，低成本完成物联网开发。 比如：阿里云、百度云、华为…...

编程日记 2023/2/28 16:29:55

PTA L1-059 敲笨钟（详解）

前言&#xff1a;内容包括&#xff1a;题目&#xff0c;代码实现&#xff0c;大致思路&#xff0c;代码解读 题目&#xff1a; 微博上有个自称“大笨钟V”的家伙&#xff0c;每天敲钟催促码农们爱惜身体早点睡觉。为了增加敲钟的趣味性&#xff0c;还会糟改几句古诗词。其糟改…...

编程日记 2023/2/28 16:28:48

【设计模式】9.桥接模式

概述 现在有一个需求&#xff0c;需要创建不同的图形&#xff0c;并且每个图形都有可能会有不同的颜色。我们可以利用继承的方式来设计类的关系&#xff1a; 我们可以发现有很多的类&#xff0c;假如我们再增加一个形状或再增加一种颜色&#xff0c;就需要创建更多的类。 试…...

编程日记 2023/2/28 16:27:39

五、线程池

文章目录什么是线程池JDK自带的构建线程池的方式newFixedThreadPoolnewSingleThreadExecutornewCachedThreadPoolnewScheduleThreadPoolnewWorkStealingPoolThreadPoolExecutor应用&源码剖析为什么要自定义线程池ThreadPoolExecutor应用ThreadPoolExecutor源码剖析ThreadPo…...

编程日记 2023/2/28 16:26:27

ROS从入门到精通2-6：Rviz可视化进阶(画坐标轴、直线、平面、圆柱等)

目录0 专栏介绍1 Rviz可视化2 环境配置3 使用方法4 测试用例0 专栏介绍 本专栏旨在通过对ROS的系统学习&#xff0c;掌握ROS底层基本分布式原理&#xff0c;并具有机器人建模和应用ROS进行实际项目的开发和调试的工程能力。 &#x1f680;详情&#xff1a;《ROS从入门到精通》…...

编程日记 2023/2/28 16:25:18

Linux命令之lz4命令

一、lz4命令简介 LZ4是一种压缩格式&#xff0c;特点是压缩/解压缩速度超快(压缩率不如gzip)&#xff0c;如果你特别在意压缩速度&#xff0c;或者当前环境的CPU资源紧缺&#xff0c;可以考虑这种格式。lz4是一种非常快速的无损压缩算法&#xff0c;基于字节对齐LZ77系列压缩方…...

编程日记 2023/2/28 16:24:08

强强角逐，筑梦开源| 2022年度启智社区优秀项目及开发者评选结果正式揭晓

2月24日&#xff0c;第四届OpenI/O启智开发者大会在深圳隆重开幕。本届大会以“算网筑基、开源启智、AI赋能”为主题&#xff0c;邀请国内人工智能开源领域领军院士亲自参加&#xff0c;汇聚学术界、产业界的技术专家&#xff0c;围绕中国算力网资源基座、开源社区服务支撑环境…...

编程日记 2023/2/28 16:23:00

【使用两个队列实现栈】

文章目录前言使用两个队列实现栈1.队列接口函数引入2.栈的初始化3.向栈中插入元素4.出栈操作5.取出栈顶元素6.判断栈是否为空7.释放内存空间总结前言 本文章主要介绍栈和队列的相互转换。 使用两个队列实现栈 我们知道&#xff0c;栈的特点是后进先出&#xff0c;而队列的特点…...

编程日记 2023/2/28 16:21:50

毕业设计 基于51单片机环境监测设计 光照 PM2.5粉尘 温湿度 2.4G无线通信

基于51单片机环境监测设计 光照 PM2.5粉尘 温湿度 2.4G无线通信1、项目简介1.1 系统构成1.2 系统功能2、部分电路设计2.1 STC89C52单片机核心系统电路设计2.2 dht11温湿度检测电路设计2.3 NRF24L01无线通信电路设计3、部分代码展示3.1 NRF24L01初始化3.2 NRF24L01的SPI写时序3.…...

编程日记 2023/2/28 16:20:41

PowerShell Install Rabbitmq

Rabbitmq 前言 RabbitMQ是实现了高级消息队列协议&#xff08;AMQP&#xff09;的开源消息代理软件&#xff08;亦称面向消息的中间件&#xff09;。RabbitMQ服务器是用Erlang语言编写的&#xff0c;而集群和故障转移是构建在开放电信平台框架上的。所有主要的编程语言均有与代…...

编程日记 2023/2/28 16:19:34

ASM 字节码插桩：隐私合规方法检测!

1.前言近两年来工信部对于应用的隐私合规安全问题愈加重视&#xff0c;对 Android 平台的管控程度也要比 IOS 平台严格很多&#xff0c;很多不合规的应用也先后被下架要求整改。笔者就曾遇到过加班整改隐私合规的问题&#xff0c;隐私合规问题主要针对两个方面。在用户同意隐私…...

编程日记 2023/2/28 16:18:14

spring data jpa使用流式查询

思路 调用org.hibernate.query.Query.stream方法查询数据 代码样例 import static org.hibernate.annotations.QueryHints.READ_ONLY; import static org.hibernate.jpa.QueryHints.HINT_FETCH_SIZE; import org.hibernate.query.Query;使用HQL查询 Query<MyEntity> …...

编程日记 2023/2/28 16:17:01

Golang实现RabbitMQ中死信队列各个情况

下面这段教程针对是你已经有一些基本的MQ的知识&#xff0c;比如说能够很清楚的理解queue、exchange等概念&#xff0c;如果你还不是很理解&#xff0c;我建议你先访问官网查看基本的教程。 文章目录1、造成死信队列的主要原因2、操作逻辑图3、代码实战3.1 针对原因1&#xff1…...

编程日记 2023/2/28 16:15:47

react源码分析：组件的创建和更新

这一章节就来讲讲ReactDOM.render()方法的内部实现与流程吧。 因为初始化的源码文件部分所涵盖的内容很多&#xff0c;包括创建渲染、更新渲染、Fiber树的创建与diff&#xff0c;element的创建与插入&#xff0c;还包括一些优化算法&#xff0c;所以我就整个的React执行流程画了…...

编程日记 2023/2/28 16:14:34

Android Lmkd 低内存终止守护程序

一、低内存终止守护程序 Android 低内存终止守护程序 (lmkd) 进程可监控运行中的 Android 系统的内存状态&#xff0c;并通过终止最不必要的进程来应对内存压力大的问题&#xff0c;使系统以可接受的性能水平运行。 所有应用进程都是从zygote孵化出来的&#xff0c;记录在AMS…...

编程日记 2023/2/28 16:13:20

快速掌握 Flutter 图片开发核心技能

大家好&#xff0c;我是 17。 在 Flutter 中使用图片是最基础能力之一。17 做了精心准备&#xff0c;满满的都是干货&#xff01;本文介绍如何在 Flutter 中使用图片&#xff0c;尽量详细&#xff0c;示例完整&#xff0c;包会&#xff01; 使用网络图片 使用网络图片超级简…...

编程日记 2023/2/28 16:12:07

复习使用git（二）

删除远程分支 git push origin --delete 分支名 撤销修改 撤销工作区的修改 已修改&#xff0c;但尚未添加&#xff08;add&#xff09;&#xff0c;使用 git restore 文件名 撤销工作区的修改。 Note: “git checkout – 文件名”&#xff0c;checkout 检出的意思&#x…...

编程日记 2023/2/28 16:10:50

站群系列服务器做视频网站/外贸营销型网站设计

以下方法针对WIN10操作系统&#xff0c;步骤如下&#xff1a;1&#xff0c;点击开始菜单&#xff0c;选择所有应用。找到Xbox应用&#xff0c;点击打开。2&#xff0c;打开Xbox应用后&#xff0c;找到左边工具栏的第四项&#xff0c;点击一下&#xff08;会提示Win G&#xff…...

编程日记 2025/2/1 8:57:44

114网站制作/企业如何进行品牌推广

R语言出现中文乱码 解决方法&#xff1a;点击File—Reopen with encoding-----UTF-8 #操作完成后&#xff0c;R语言中文乱码即可恢复正常。...

编程日记 2025/2/1 7:01:04

论文引用网站数据 如何做注释/seo视频教程汇总

EOF是一个计算机术语&#xff0c;为End Of File的缩写&#xff0c;在操作系统中表示资料源无更多的资料可读取。资料源通常称为档案或串流。通常在文本的最后存在此字符表示资料结束。是int类型的宏定义&#xff0c;它扩展为负整数常量表达式&#xff08;通常为-1&#xff09;。…...

编程日记 2025/2/1 5:12:54

做的好的招投标网站/开发做一个网站需要多少钱

MySQL DELETE语句和TRUNCATE TABLE语句的区别 MySQL DELETE语句和TRUNCATE TABLE语句功能相似&#xff0c;但是二者究竟有何区别呢&#xff1f; DELETE可以按条件删除表中数据。 在没有条件时&#xff0c;DELETE FROM table1 &#xff08;成功返回条数&#xff09;或TRUNCAT…...

编程日记 2025/2/1 2:13:50

电子商务网站界面设计实验报告/温州seo服务

谷歌人工智能部门DeepMind在预测蛋白质结构方面迈出了一大步。公司表示&#xff0c;DeepMind开发的AlphaFold系统已经解决了关键的“蛋白质折叠问题”&#xff0c;并将解决问题的运算时间从数月缩短至数小时&#xff0c;这有助于加快药物发现速度&#xff0c;有可能破解一个类似…...

编程日记 2025/2/1 1:10:04

哪里有html5网站建设/大学生网络营销策划方案书

根据 wav 文件格式规范&#xff0c;利用 ultraEdit 等工具软件&#xff0c;对你所采集的某一 wav 文件的采样率、量化位数、声道数等参数进行验证&#xff0c; 并图形标注。 wav文件是文件的一种格式&#xff0c;主要是音乐、语音的文件存储格式&#xff0c;本次博客将讲解如何…...

编程日记 2025/2/1 0:58:26