CSS 网格列

Question

我有这个代码:

.four-items-across-container{
    display:grid;
    grid-template-columns:0px 80% 1fr; 
}

我想知道当我调整页面宽度为 800px 时，例如 1fr 列可以在没有媒体查询的情况下获得另一行吗？

如果是，怎么办？

Answer 1

我觉得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>