我有这个代码:
.four-items-across-container{
display:grid;
grid-template-columns:0px 80% 1fr;
}
我想知道当我调整页面宽度为 800px
时,例如 1fr
列可以在没有媒体查询的情况下获得另一行吗?
如果是,怎么办?
最佳答案
我觉得flexbox更适合这个
.container {
display: flex;
height:100px;
flex-wrap:wrap;
width:100%;
}
.container > div:first-child{
flex:1 1 80%;
background:red;
}
.container > div:last-child{
flex:1 1 20%;
background:blue;
min-width:100px; /*adjust this like you want*/
}
/*to illustrate*/
.container:hover {
width:40%;
transition:1s all;
}
<div class="container">
<div></div>
<div></div>
</div>
关于CSS 网格列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52991229/