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>