Column CSS: оформление сайтов при помощи колонок

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

Синтаксис для создания многоколоночного макета выглядит так:

.container {

column-count: 2;

column-gap: 20px;

}

Здесь мы используем свойства column-count и column-gap. Свойство column-count задает количество столбцов, на которые нужно разделить контейнер, а свойство column-gap задает расстояние между столбцами.

Пример:

.container {

column-count: 2;

column-gap: 20px;

}

.item {

margin-bottom: 20px;

}

Здесь мы создали контейнер с классом .container и заполнили его несколькими элементами с классом .item. Затем мы использовали свойства column-count и column-gap для разделения контейнера на два столбца с расстоянием между ними в 20 пикселей. Также мы добавили небольшой отступ между элементами с помощью свойства margin-bottom.

Результат:

Статья 1 | Статья 4

Статья 2 | Статья 5

Статья 3 | Статья 6

В этом примере мы получили два столбца, которые отображают элементы в контейнере в столбик. Если бы мы вместо 2 установили значение 3 для свойства column-count, то мы бы получили три столбца, и так далее.

Однако, стоит учитывать, что свойство column CSS не работает в старых браузерах, таких как Internet Explorer 9 и более ранних версиях. Поэтому, при использовании этого свойства, необходимо предусмотреть замену для старых браузеров, например, использовать фреймворки, такие как Bootstrap, Foundation и т.д.