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;并根据结…

怎样更有效的运营Etsy店铺?

大家都知道&#xff0c;Etsy作为一个重要的电商平台&#xff0c;给很多人提供了不少机会。但是如何取得etsy店铺运营的成功呢&#xff1f;第一步就是选好辅助工具。 什么是指纹浏览器&#xff1f; VMLogin指纹浏览器(www.vmlogin.com.cn) 是一种工具&#xff0c;通过伪装用户…

Luancher和unityLibrary都有build.gradle有什么不同

在 Unity 项目中&#xff0c;通常会包含两个主要的 Module&#xff1a; Launcher Module: 这是 Android 项目的主要 Module&#xff0c;包含 UnityPlayerActivity&#xff0c;并负责启动 Unity 游戏。 unityLibrary Module: 这是 Unity 导出的 Android 工程&#xff0c;其中包…

网络质量探测

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

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

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

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

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

MyBatis-generator生成的实体带swagger注释

学习了《MyBatis-generator生成的实体带注释》&#xff0c;用 field.addJavaDocLine("/** " introspectedColumn.getRemarks() " */"); 这样把数据的注释弄过来了。但是想直接弄swagger&#xff0c;要如何拼接呢&#xff1f; 把上面的拼接改下&#xf…

list-watch集群调度

调度约束 Kubernetes 是通过 List-Watch **** 的机制进行每个组件的协作&#xff0c;保持数据同步的&#xff0c;每个组件之间的设计实现了解耦。 用户是通过 kubectl 根据配置文件&#xff0c;向 APIServer 发送命令&#xff0c;在 Node 节点上面建立 Pod 和 Container。…

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;本文将会介…

【ChatGPT】教我 Flyweight(享元) 模式

文章目录 设计模式中 Flyweight 模式&#xff0c;实际应用场景有哪些&#xff1f;我需要画很多的树&#xff0c;以这个需求为例来教我 Flyweight 模式。好的&#xff0c;我大概明白了&#xff0c;我还有点疑惑&#xff0c;请问外在状态和内在状态是哪些&#xff1f;你可以讲一下…

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

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

Spring的核心概念汇总

Spring的核心概念 &#xff08;一&#xff09;什么是BeanDefinition BeanDefinition是Spring框架中的一个概念&#xff0c;用于描述和定义在Spring容器中创建的bean。在Spring中&#xff0c;我们可以通过配置文件或者注解的方式定义BeanDefinition&#xff0c;它包含了一些关键…

SolidWorks2019安装教程(正版)

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

2023-11-01 node.js-electron-环境配置-记录

摘要: 2023-11-01 node.js-electron-环境配置-记录 相关文档: Node.js Build cross-platform desktop apps with JavaScript, HTML, and CSS | Electron node.js的国内源 - Python技术站 node.js 下载地址: https://nodejs.org/dist/v20.9.0/ 说明: 最好使用最新版本当前我使…