Столбцы сетки 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>