Подстраивать разные по ширине элементы друг под друга
Пытаюсь сделать 2 див блока рядом, что бы при уменьшении экрана они становились друг под другом. Когда 2 блока одинакового размера все работает но при перевесе правого блока над левым уменьшая экран блоки остаются стоять рядом
<style>
.box{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 300px) 1000px);
}
.q{
background: red;
}
.q1{
background: green;
}
</style><div class="box">
<div class="q">
1
</div>
<div class="q1">
2
</div>
</div>