У меня есть ряд из 6 предметов. В зависимости от ширины он разбивает элементы на новые строки.
Проблема заключается в том, что это может произойти (звездочкой является элемент):
*****
*
Когда я измените размер экрана. Я хочу, чтобы он адаптировался, как показано ниже:
******
***
***
**
**
**
*
*
*
*
*
*
Я знаю, что могу использовать медиа-запросы для этого, но я надеюсь, что есть другое решение. Есть ли?
main {
background: #eee;
max-width: 600px;
}
section {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, auto));
grid-gap: 1rem;
}
div {
background: #ddd;
}
<main>
<section>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
</section>
</main>