Количество столбцов - CSS-хитрости

Если вам нужно точное количество столбцов при разработке макета с несколькими столбцами, используйте column-count.

.lead ( column-count: 3; )

Учитывая количество столбцов, браузер равномерно распределяет контент именно по этому количеству столбцов.

Это свойство также может использоваться в сокращении columnsи может использоваться вместе с column-width. Когда оба свойства объявлены, column-countэто максимальное количество столбцов.

Значения

column-countможет быть autoцелым числом.

Используйте, autoесли вы также используете column-width. Думайте об этом как о способе сказать браузеру, что он должен column-widthвзять на себя инициативу.

Целое число, также известное как количество столбцов, должно быть больше или равно 0.

В отличие от column-widthэтого свойство будет содержать количество столбцов независимо от ширины браузера. Это означает, что если вы вытащили 5-колоночный макет на своем мобильном телефоне, у вас будет очень сжатый 5-колоночный макет для навигации. column-countлучше всего работает рядом column-width.