css 轨道,html-当其他轨道增加时,CSS网格的轨道不会缩...

由于行和列定义中都包含1fr,因此水平和垂直空间受到限制-因此网格项目将平均共享它们.尝试将其更改为自动用于行和列,您可以看到一切正常,但还不完美-请注意,悬停的网格项周围存在空格:

.grid--container {

height: 100vh;

width: 100vw;

max-height: 100%;

max-width: 100%;

display: grid;

grid-template-columns: auto auto; /* changed */

grid-template-rows: auto auto; /* changed */

border: 1px solid red;

}

.track--section {

border: 1px dotted grey;

min-height: 0;

min-width: 0;

}

.track--section:hover {

background-color: #333;

height: 75vh;

width: 75vw;

}

section1
section2
section3
section4

您可以尝试以下方法:

>使用grid-template-columns的2列布局:1fr 1fr

>使用grid-auto-rows为此的隐式行:1fr

请参见下面的演示:

.grid--container {

height: 100vh;

width: 100vw;

max-height: 100%;

max-width: 100%;

display: grid;

grid-template-columns: 1fr 1fr; /* 2 columns */

grid-auto-rows: 1fr; /* implicit rows */

border: 1px solid red;

}

.track--section {

border: 1px dotted grey;

min-height: 0;

min-width: 0;

}

.track--section:hover {

background-color: #333;

height: 75vh;

width: 75vw;

}

section1
section2
section3
section4

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

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

相关文章

带有示例的Python File readline()方法

文件readline()方法 (File readline() Method) readline() method is an inbuilt method in Python, it is used to get one line from the file, the method is called with this object (current file stream/IO object) and returns one line from the file, we can also sp…

++代码实现 模糊综合算法_干货 | 十大经典排序算法最强总结(内含代码实现)...

一、算法分类十种常见排序算法可以分为两大类:比较类排序:通过比较来决定元素间的相对次序,由于其时间复杂度不能突破O(nlogn),因此也称为非线性时间比较类排序。非比较类排序:不通过比较来决定元素间的相对次序&#…

如何恢复osd的auth表中的权限

2019独角兽企业重金招聘Python工程师标准>>> 原因:当你一不小心删掉了osd的auth信息时,重启osd服务,此时ceph -s查看发现osd down 如: [rootceph ~]# ceph osd tree ID WEIGHT TYPE NAME UP/DOWN REWEIGHT PRIM…

nginx服务器配置安全维护,Nginx服务器相关的一些安全配置建议

这篇文章主要介绍了Nginx服务器相关的一些安全配置建议,共计总结了十个小点,需要的朋友可以参考下Nginx是当今最流行的Web服务器之一。它为世界上7%的web流量提供服务而且正在以惊人的速度增长。它是个让人惊奇的服务器,我愿意部署它。下面是一个常见安全陷阱和解决…

带有示例的Python date strftime()方法

Python date.strftime()方法 (Python date.strftime() Method) date.strftime() method is used to manipulate objects of date class of module datetime. date.strftime()方法用于操作模块datetime的日期类的对象。 It takes an instance of the class and returns a stri…

python 发送邮件connect none_使用python向IP地址发送邮件

所以我尝试通过python脚本发送邮件。使用通常的接收者地址格式可以正常工作”userdomain.tld". 当我现在尝试使用带有接收者“user[IP Address]的脚本时,我所有的调试输出看起来都很好,sendmail方法也可以工作,但是邮件始终没有收到。我…

老男孩IT教育38期面授班 学员邢伟的决心书

大家好我叫邢伟,今年22岁,上一份工作是做媒体推广的,拿完奖金饭补全勤奖月薪大概4K左右,在北京生活感觉力不从心现在参加老男孩IT教育linux运维38期,在接下来的学习中,我的目标是毕业后达到月薪12K在接下来的学习中早上…

PS打开PSD文档服务器未响应,ps打不开psd文件的解决方法

很多人用ps做作品的时候,经常遇到psd文件打不开的问题,最常见的有三种原因,有两种可以设置解决,另一种是文件损坏,不可恢复。下面是学习小编给大家整理的有关介绍ps打不开psd文件的解决方法,希望对大家有帮…

strictmath_Java StrictMath cbrt()方法与示例

strictmathStrictMath类cbrt()方法 (StrictMath Class cbrt() method) cbrt() method is available in java.lang package. cbrt()方法在java.lang包中可用。 cbrt() method is used to find the cube root of the given parameter in the method. Here, cbrt stands for cube …

模块---常用模块

import osprint(os.getcwd()) #得到当前目录#os.chmod("/usr/local",7) #给文件或者文件夹加权限,7为最高权限print(os.chdir("../")) #更改当前目录print(os.curdir) #当前目录print(os.pardir) #父目录print(os.mkdir("test1")) #创…

excel添加列下拉框票价_excel表格下拉表格添加数据-excel2017表格中怎么制作下拉菜单列表框...

在Excel表中,如何将增加下拉菜单的选项?excel中的下拉菜单选项,就是筛选的功能,具体操作如下:1.首先选中a、b两列数据,在“开始”选项卡上选择“筛选”;2.这样就在excel表中添加了下拉菜单选项。…

ajax实现两个aspx跳转,请问ajax执行成功后可以跳转到另一个页面吗?

一只名叫tom的猫通过ajax读取到写好的jsp,另一个jsp可以放framse或者层都可以,显示就行了123456789$.ajax({ type: "POST", //用post方式传输 dataType: "html", //数据格式:json…

Android横竖屏切换View设置不同尺寸或等比例缩放的自定义View的onMeasure解决方案(2)...

Android横竖屏切换View设置不同尺寸或等比例缩放的自定义View的onMeasure解决方案(2)附录文章1以xml布局文件方式实现了一个view在横竖屏切换时候的大小尺寸缩放,实现这种需求,也可以使用自定义View的onMeasure方法实现。比如&…

java中的push方法_Java ArrayDeque push()方法与示例

java中的push方法ArrayDeque类push()方法 (ArrayDeque Class push() method) push() Method is available in java.lang package. push()方法在java.lang包中可用。 push() Method is used to push an element onto the stack denoted by this deque. push()方法用于将元素压入…

7段均衡器最佳参数_十段均衡器的设置和参数

本帖最后由 GTXarrow 于 2015-2-2 14:53 编辑EQ的基本定义:EQ是Equalizer的缩写,大陆称为均衡器,港台称为等化器。作用是调整各频段信号的增益值。10段均衡器表示有10个可调节节点。节点越多,便可以调节出更精确的曲线,同时难度更…

本地 服务器 文件传输,本地服务器文件传输

本地服务器文件传输 内容精选换一换CDM支持周期性自动将新增文件上传到OBS,不需要写代码,也不需要用户频繁手动上传即可使用OBS的海量存储能力进行文件备份。这里以CDM周期性备份FTP的文件到OBS为例进行介绍。例如:FTP服务器的to_obs_test目录…

上市公司行情查询站点

http://stock.finance.sina.com.cn/usstock/quotes/BABA.html

java peek方法_Java ArrayDeque peek()方法与示例

java peek方法ArrayDeque类peek()方法 (ArrayDeque Class peek() method) peek() Method is available in java.lang package. peek()方法在java.lang包中可用。 peek() Method is used to return the head element of the queue denoted by this deque but without removing t…

中怎么撤回消息_微信消息撤回也能看到,这个开源神器牛x!语音、图片、文字都支持!...

1.前言 微信在2014年的时候,发布的v5.3.1 版本中推出了消息撤回功能,用户可以选择撤回 2 分钟内发送的最后一条信息。现在很多即时通讯的软件都有撤回这个功能。腾讯为了照顾手残党,在微信和QQ中都加入了【消息撤回】的功能。但是这个功能对于…

ntce服务器不稳定,当心!你的教师资格证成绩失效了!| 服务

原标题:当心!你的教师资格证成绩失效了!| 服务湖南的小王同学资格证笔试考了两次才全部通过,想着好好歇歇,结果就误了面试报名,等到第三年面试报名时才发现有一科笔试成绩已经过期了......天呐,…