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

[Anonymous]

Я строю веб-макет на основе компонентов, где размер и форма элементов контента значительно различаются, например, карты, которые могут иметь разные длины текста, изображения или кнопки. Традиционно я использую медиа-запросы для регулировки макета для разных размеров экрана (например, переключение с 4 столбцов на 2 столбца на более мелких устройствах). Идея состоит в том, чтобы позволить макету адаптироваться естественным образом на основе фактического содержания в элементах сетки, а не в зависимости от ширины устройства.

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

    .grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}

Это работает в некоторой степени, но я хотел бы пойти дальше - возможно, макет, который настраивается на основе количества элементов или их размера контента, а не только ширины просмотра. /> Цели:
Pure CSS Решение (без JS, без справочников медиа)>

Подробнее здесь: https://stackoverflow.com/questions/796 ... ayout-that