Колонны - CSS-хитрости | CSS Альманах 2024

С помощью всего нескольких правил CSS вы можете создать макет, вдохновленный печатью, который обладает гибкостью в Интернете. Это как взять газету, но по мере того, как бумага становится меньше, столбцы автоматически корректируются и балансируются, позволяя содержимому течь естественным образом.

.intro ( columns: 300px 2; )

columnsСвойство будет принимать column-count, column-widthили оба свойства.

columns: || ;

Для создания гибкого многоколоночного макета рекомендуется использовать оба column-countи column-width. column-countБудет выступать в качестве максимального числа столбцов, в то время как column-widthбудет диктовать ширину минимальной для каждого столбца. Собрав эти свойства вместе, многоколоночный макет автоматически разбивается на один столбец при узкой ширине браузера без необходимости использования медиа-запросов или других правил.

Многоколоночный макет отлично работает с блочными элементами, включая списки, для создания гибкой навигации.

Для дальнейшей точной настройки многоколоночного макета используйте break-insideдля определенных элементов, чтобы они не застревали между столбцами.