使用弹性基础的css网格?
我当前正在做的
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
但我希望当视窗小于400px时,容器应调整大小以适应视窗... 或者我如何将基于Flex的属性实现到网格...其中,最小值应为0px,但容器应从400px开始,然后增长到1FR
解决方案
您可以将您所拥有的与min()
和100vw
组合在一起。小于100vw
以避免不必要的溢出,并且1fr
将完成填充剩余空间的工作。任何大于50vw
的值都适用
.container {
display:grid;
grid-template-columns: repeat(auto-fill, minmax(min(400px,80vw), 1fr));
grid-gap:10px;
}
.container div {
height:50px;
background:red;
}
body {
margin:0;
}
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
相关文章