CSS :: Свойство column-fill

css-свойство column-fill (от англ. column fill – заполнение колонок) управляет распределением содержимого между колонками в многоколоночном элементе.

Характеристики

Значение по умолчанию: balance.
Применяется: к многоколоночным элементам.
Наследуется: нет.
Анимируется: нет.
JavaScript: object.style.columnFill="value".

Синтаксис

column-fill: auto | balance | balance-all

Значения

auto – браузер заполняет колонки последовательно одна за другой.
balance – браузер будет распределять содержимое равномерно между всеми колонками, в результате чего они будут иметь одинаковую высоту. При печати данное значение будет использовано только для последней страницы.
balance-all – браузер будет распределять содержимое равномерно между всеми колонками, в результате чего они будут иметь одинаковую высоту. При печати данное значение будет использовано для всех страниц.

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-multicol-1/#cf

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/column-fill

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
		
		p{
		width: 400px;
		height: 300px;
		margin: 1em;
		padding: 0.7em;
		border: 1px solid green;
		column-count: 3;		
		}
		
		.p_1{column-fill: auto;}
		
		.p_2{column-fill: balance;}

	</style>
	
</head>
<body>

	<p class="p_1">
		Текст текст текст текст текст текст текст 
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст		
	</p> 
 
	<p  class="p_2">
		Текст текст текст текст текст текст текст 
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
	</p>
	
 </body>
</html>

Пример №1