grid布局中grid-row和grid-column


目录

一、grid-row

二、grid-column

三、实例


一、grid-row

grid-row属性定义了网格元素行的开始和结束位置。结合了grid-row-start和grid-row-end

 grid-row: 1 / 3;//表示行线从第一行线到第三行线为止

二、grid-column

grid-column属性定义了网格元素列的开始和结束位置。结合了grid-column-start和grid-column-end

 grid-column: 1 / 3;//表示列线从第一列线到第三列线为止

三、实例

.content {display: grid;grid-template-columns: 1fr 3fr;grid-template-rows: 1fr 1fr 1fr;width: 100%;height: 100%;gap: 20px;.item {min-width: 100%;min-height: 100%;border: 1px solid #cc7373;}.item_last {grid-row: 1 / 3;grid-column: 2 / 3;}
}
 <div class="view"><div class="content"><div class="item"></div><div class="item"></div><div class="item item_last"></div><div class="item"></div><div class="item"></div></div></div>

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

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

相关文章

《YOLOv8-Pose关键点检测》专栏介绍 CSDN独家改进创新实战 专栏目录

YOLOv8-Pose关键点检测专栏介绍&#xff1a;http://t.csdnimg.cn/gRW1b ✨✨✨手把手教你从数据标记到生成适合Yolov8-pose的yolo数据集&#xff1b; &#x1f680;&#x1f680;&#x1f680;模型性能提升、pose模式部署能力&#xff1b; &#x1f349;&#x1f349;&#…

LeetCode----84. 柱状图中最大的矩形

题目 给定 n 个非负整数,用来表示柱状图中各个柱子的高度。每个柱子彼此相邻,且宽度为 1 。 求在该柱状图中,能够勾勒出来的矩形的最大面积。 示例 1: 输入:heights = [2,1,5,6,2,3] 输出:10 解释:最大的矩形为图中红色区域,面积为 10 示例 2: 输入: heights =…

tolua中table.remove怎么删除表中符合条件的数据

tolua中table.remove怎么删除表中符合条件的数据 介绍问题&#xff08;错误方式删除数据&#xff09;正确删除方案从后向前删除递归方式删除插入新表方式 拓展一下总结 介绍 在lua中删除表中符合条件的数据其实很简单&#xff0c;但是有一个顺序问题&#xff0c;因为lua的表中…

【机器学习】四、计算学习理论

1 基础知识 计算学习理论&#xff08;computational learning theory&#xff09;&#xff1a;关于通过“计算”来进行“学习”的理论&#xff0c;即关于机器学习的理论基础&#xff0c;其目的是分析学习任务的困难本质&#xff0c;为学习算法体统理论保证&#xff0c;并根据结…

网络质量探测

目录 一.BFD监测网络状态 二. NQA检测网络状态 一.BFD监测网络状态 BFD(BidrectionaL Forwarding Detection 双向转发检测)用于快速检测系统设备之间的发送和接受两个方向的通信故障&#xff0c;并在出现故障时通知生成应用。BFD 广泛用于链路故障检测&#xff0c;并能实现与…

基于深度学习的口罩佩戴检测

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介二、功能三、基于深度学习的口罩佩戴检测四. 总结 一项目简介 基于深度学习的口罩佩戴检测是一种利用计算机视觉技术和深度学习算法进行口罩佩戴情况检测的…

计算机毕业设计选题推荐-校园失物招领微信小程序/安卓APP-项目实战

✨作者主页&#xff1a;IT毕设梦工厂✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…

0基础学习PyFlink——时间滚动窗口(Tumbling Time Windows)

大纲 mapreduce完整代码参考资料 在《0基础学习PyFlink——个数滚动窗口(Tumbling Count Windows)》一文中&#xff0c;我们发现如果窗口内元素个数没有达到窗口大小时&#xff0c;计算个数的函数是不会被调用的。如下图中红色部分 那么有没有办法让上图中&#xff08;B,2&…

人工智能基础_机器学习007_高斯分布_概率计算_最小二乘法推导_得出损失函数---人工智能工作笔记0047

这个不分也是挺难的,但是之前有详细的,解释了,之前的文章中有, 那么这里会简单提一下,然后,继续向下学习 首先我们要知道高斯分布,也就是,正太分布, 这个可以预测x在多少的时候,概率最大 要知道在概率分布这个,高斯分布公式中,u代表平均值,然后西格玛代表标准差,知道了 这两个…

C++:map和set的基本使用

文章目录 搜索模型关联式容器setset的基本使用set的其他使用 multisetmapmap的基本使用map中的[] multimap 搜索模型 在实际搜索中有两个搜索模型&#xff1a;Key的搜索模型和Key/Value的搜索模型 Key的搜索模型&#xff1a; 简单来说就是在一个搜索树&#xff0c;搜索树中的…

汽车EDI:福特Ford EDI项目案例

项目背景 福特&#xff08;Ford&#xff09;是世界著名的汽车品牌&#xff0c;为美国福特汽车公司&#xff08;Ford Motor Company&#xff09;旗下的众多品牌之一。此前的文章福特FORD EDI需求分析中&#xff0c;我们已经了解了福特Ford EDI 的大致需求&#xff0c;本文将会介…

【Linux】jdk、tomcat、MySQL环境搭建的配置安装,Linux更改后端端口

一、作用 工具的组合为开发者和系统管理员提供了构建和运行Java应用程序以及存储和管理数据的完整环境。 JDK&#xff08;Java Development Kit&#xff09;&#xff1a;JDK是Java开发工具包&#xff0c;它提供了开发和运行Java应用程序所需的工具和库。通过安装JDK&#xff0c…

SolidWorks2019安装教程(正版)

网盘资源附文末 一.简介 SolidWorks软件是世界上第一个基于Windows开发的三维CAD系统&#xff0c;由于技术创新符合CAD技术的发展潮流和趋势&#xff0c;SolidWorks公司于两年间成为CAD/CAM产业中获利最高的公司。良好的财务状况和用户支持使得SolidWorks每年都有数十乃至数百…

Mac-Java开发环境安装(JDK和Maven)

JDK安装 1、访问oracle官网&#xff0c;下载jdk 点击下载链接&#xff1a;https://www.oracle.com/java/technologies/downloads/#java11-mac 选择Mac版本&#xff0c;下载dmg 打勾点击下载&#xff0c;跳转登陆&#xff0c;没有就注册&#xff0c;输入账号密码即可下载成功…

Ubuntu20.04安装CUDA、cuDNN、tensorflow2可行流程(症状:tensorflow2在RTX3090上运行卡住)

最近发现我之前在2080ti上运行好好的代码&#xff0c;结果在3090上运行会卡住很久&#xff0c;而且模型预测结果完全乱掉&#xff0c;于是被迫研究了一天怎么在Ubuntu20.04安装CUDA、cuDNN、tensorflow2。 1.安装CUDA&#xff08;包括CUDA驱动和CUDA toolkit&#xff0c;注意此…

ajax-axios发送 get请求 或者 发送post请求带有请求体参数

/* axios v0.21.1 | (c) 2020 by Matt Zabriskie */ !function(e,t){"object"typeof exports&&"object"typeof module?module.exportst():"function"typeof define&&define.amd?define([],t):"object"typeof export…

【WinForm详细教程四】WinForm中的ProgressBar 、ImageList和ListView控件

文章目录 1.ProgressBar2. ImageList3.ListView控件 1.ProgressBar 用于显示某个操作的进度。 属性&#xff1a; Value: 表示当前进度条的值&#xff0c;其范围由Min和Max决定。Step: 设置每次调用PerformStep()方法时增加的步长。MarqueeAnimationSpeed: 在Style设置为Marq…

RabbitMQ 运维 扩展

1、集群管理与配置 1.1、集群搭建 关于Rabbitmq 集群的搭建&#xff0c;详见以下文章。简单说来就是将多个单机rabbitmq服务&#xff0c;通过给到一致的密钥&#xff08;.erlang.cookie&#xff09;并且开放rabbitmq服务的 25672 端口&#xff0c;允许多节点间进行互相通讯&am…

iptables 与 firewalld

iptables 一、主机型&#xff08;包过滤防火墙&#xff09; 1、简介&#xff1a; 包过滤型防火墙是一种网络安全设备或软件&#xff0c;它工作在 2、3、4 层&#xff0c;通过检查网络数据包的源地址、目标地址、协议、端口等信息&#xff0c;根据预定义的规则来决定是否允许…

ip划分与私公网ip、ip的传递

报文问路&#xff1a;1、不知道跳转默认路由器&#xff0c;2、知道路径&#xff0c;向对应路径发出报文&#xff0c;3、路口路由器&#xff0c;下一步就是目标主机在哪。 想要通信必须同在一个局域网&#xff0c;其实将公网就可以看作一个大型的局域网。 在同一个局域网内发送…