Как создать сетку CSS, которая переносится, когда контейнер слишком мал? ⇐ CSS

[Anonymous]

У меня есть динамический макет, в котором может быть один или два элемента. Я хочу, чтобы каждый элемент занимал половину ширины, даже если существует только один элемент.
[img]https://i.sstatic.net /QSXcqPIn.png[/img]

Когда недостаточно места, чтобы половина ширины превышала минимальную ширину (11rem), я хочу, чтобы элементы занимали всю ширину и перейти на следующую строку.


В идеале это можно сделать без медиа-запросы, так что макет полностью зависит от его собственного размера, а не от полного размера области просмотра. Я не уверен, это макет сетки или флексбокс. Мне тоже не удалось заставить его работать.


< pre class="snippet-code-css lang-css Prettyprint-override">

Код: Выделить всё

.container {
display: grid;
grid-template-columns: repeat(2, minmax(11rem, 1fr));
gap: 0.5rem;
}

Код: Выделить всё

Как создать макет, в котором каждый элемент занимает половину ширины большой контейнер и полная ширина в маленьком контейнере?

Подробнее здесь: https://stackoverflow.com/questions/793 ... -too-small