是否可以限制CSS网格列的宽度?
body {
margin: 0;
padding: 0;
}
.container {
display: grid;
grid-template-columns: minmax(17.5%, 250px) minmax(31.25%, 480px) auto;
grid-template-rows: 100vh;
grid-gap: 0;
}
.menu {
padding-top: 32px;
background: linear-gradient(135deg, #837DB5 0%, #364176 100%);
}
.list-view {
background-color: #F5F5FC;
}
<div class="container">
<div class="menu"></div>
<div class="list-view"></div>
<div class="details"></div>
</div>
在上面的示例中,菜单始终使用17.5%的宽度,因为:
“如果max小于min,则将忽略max并将该函数视为min。”
来源:https : //developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
我想要的是一个17.5%宽度,最大250px的菜单。那可能吗?
可以这样声明一种方法:
.container {grid-template-columns: 250px 480px auto;}
作为您的标准规则。
然后,在考虑了要应用于第三列的最窄宽度之后,可以应用@media
查询。
假设您要确保第三列不比窄100px
。
250px + 480px + 100px = 830px
所以你需要写一个@media
查询830px
:
@media only screen and (max-width: 830px) {
.container {grid-template-columns: 17.5% 31.25% auto;}
}
工作示例:
body {
margin: 0;
padding: 0;
}
.container {
display: grid;
grid-template-columns: 250px 480px auto;
grid-template-rows: 100vh;
grid-gap: 0;
}
.menu {
padding-top: 32px;
background: linear-gradient(135deg, #837DB5 0%, #364176 100%);
}
.list-view {
background-color: #F5F5FC;
}
@media only screen and (max-width: 830px) {
.container {grid-template-columns: 17.5% 31.25% auto;}
}
<div class="container">
<div class="menu"></div>
<div class="list-view"></div>
<div class="details"></div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句