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

2024-04-06 07:37:37

由于行和列定义中都包含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

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

JS日历控件优化(增加时分秒)
JS日历控件优化在今年7月份时候写了一篇关于 "JS日历控件" 的文章 , 当时只支持年月日的日历控件,现在优化如下: 1. 在原基础上支持 yyyy-mm- ...
静脉给药时css,2017年药学专业知识一复习讲义：单室模型静脉滴注给药
勾搭小编请关注微信公众号zgyaoshi 执业药师考试交流QQ群549313697 2017年执业药师考试备考已经开始了,中公医考网为大家整理了一些备考资料,希望可以帮到大家. 第三节单室模型静脉滴 ...
为什么模型复杂度增加时，模型预测的方差会增大，偏差会减小？
点击上方"小白学视觉",选择加"星标"或"置顶" 重磅干货,第一时间送达编辑:忆臻 https://www.zhihu.com/quest ...
[css] 移动端页面不满一屏时如何实现满屏背景？
[css] 移动端页面不满一屏时如何实现满屏背景? body {min-height: 100vh; } 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨 ...
html表格输入框怎么左移动,当我向CSS中的文本框添加边框时，HTML表单输入会移动...
我想在登录表单上的输入字段中添加边框,但是当我添加边框时:1px纯黑色;到#登录表单输入,然后所有的文本框移出位置.当我向CSS中的文本框添加边框时,HTML表单输入会移动当用户输入不正确的凭据到表 ...
html点击文字展开图片,DIV CSS鼠标经过悬停在图片上时图片上方显示文字
DIV CSS鼠标悬停在没有文字内容图片上时图片上方显示文字,完全是纯css div实现.CSS实现鼠标悬停放图片上方时显示美化内容. 原始图片显示没有文字在上方,当鼠标经过悬停时显示文字并且文字背景 ...
vue 不生效打包样式_Vue打包部署到Nginx时,css样式不生效的解决方式
今天在将使用Vue-cli编写的前端项目部署到Nginx的时候发生了一件很困扰的问题: Vue-cli项目在本地使用 npm run dev的时候,页面样式是可以正常加载出来的,但是我将Vue-cl ...
使用UI框架时 css不生效使用/deep/完美解决避免污染全局样式
使用UI框架时 css不生效完美解决避免污染全局样式使用前端UI框架时在页面上单独修改css 但是不生效都是在 <style scoped> </style>这样的模式 ...
前端开发审查元素时CSS样式有个横线（该CSS样式定义后无效）的解决办法
问题概述关于这个问题,博主是在前端开发,样式调试的时候遇到的, 进行盒模型,CSS Debugger调试时,遇到样式设值后不可用的情况! 如下图: 解决办法左看右看,上看下看,最终发现是前面在编码 ...

最新文章

热门文章