Заполнение столбца - CSS-хитрости

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

ul ( height: 300px; -webkit-columns: 3; -moz-columns: 3; columns: 3; -moz-column-fill: balance; column-fill: balance; )

Это свойство доступно только в Firefox. Firefox автоматически сбалансирует контент в многоколоночном макете с ограниченной высотой. Другие браузеры всегда будут заполнять столбцы последовательно, если задано ограничение по высоте.

Чтобы Firefox вел себя как другие браузеры, то есть заполнял столбцы последовательно, вы можете установить column-fill: auto.

Значения

column-fillпринимает значения ключевых слов balanceи auto.

balanceзаполнит каждый столбец примерно одинаковым количеством содержимого, но не позволит столбцам вырасти выше, чем размер height. Вы можете обнаружить, что столбцы будут короче, чем значок, heightпоскольку браузер равномерно распределяет контент по горизонтали.

autoбудет заполнять каждый столбец до тех пор, пока он не достигнет, heightи делать это, пока не закончится контент. Учитывая содержимое, это значение не обязательно будет заполнять все столбцы или заполнять их равномерно.

Это все равно что наливать сок в стаканы. Вы можете налить равное количество сока в каждый стакан и обнаружить, что вы не наполняете каждый стакан до верха ( balance). Или вы можете наполнить стакан доверху, пока он не станет полным, и повторять это, пока не останется сока. В результате в оставшихся стаканах может быть меньше сока или вообще не будет ( auto).

См. Пример заполнения столбца пером (CSS-Tricks) от CSS-Tricks (@ css-tricks) на CodePen.

Поддержка браузера

Значения column-fillключевых слов специально работают в Firefox. Они не работали в августе 2014 г., когда изначально была написана эта запись в Альманахе, но работают при повторном тестировании в августе 2015 г. (Chrome 44). Во время этого тестирования кажется, что динамическое изменение значения не требуется, вам пришлось принудительно выполнить ретрансляцию.

Браузер поддерживает макет с несколькими столбцами в целом: