CSS column-fill — вирівнювання висоти колонок

HTML

<div class="cols balance">balance. Багатоколонкова верстка ділить текст автоматично: браузер сам вирішує, де перервати рядок і почати нову колонку. Що довший текст, то краще видно поділ — тому цей абзац навмисно багатослівний і ще й трохи повторюється, щоб колонкам було чим заповнитися.</div>
<div class="cols auto">auto. Багатоколонкова верстка ділить текст автоматично: браузер сам вирішує, де перервати рядок і почати нову колонку. Що довший текст, то краще видно поділ — тому цей абзац навмисно багатослівний і ще й трохи повторюється, щоб колонкам було чим заповнитися.</div>

CSS

.cols {
    columns: 3;
    height: 140px;
    margin-bottom: 12px;
    border: 1px solid #ccc;
}

.balance { column-fill: balance; }
.auto    { column-fill: auto; }

HTML

<p class="label">column-fill: balance (типово)</p>
<div class="cols balance">Багатоколонковий блок сам ріже текст на колонки. Висота тут задана явно, тому різницю видно одразу: одне значення розподіляє текст порівну між трьома колонками, а друге заповнює першу до самого низу й лише потім переходить до наступної. Без заданої висоти обидва значення дають однаковий результат.</div>

<p class="label">column-fill: auto</p>
<div class="cols fill">Багатоколонковий блок сам ріже текст на колонки. Висота тут задана явно, тому різницю видно одразу: одне значення розподіляє текст порівну між трьома колонками, а друге заповнює першу до самого низу й лише потім переходить до наступної. Без заданої висоти обидва значення дають однаковий результат.</div>

CSS

body {
  font-family: sans-serif;
  padding: 16px;
}

.label {
  font-size: 13px;
  color: #666;
  margin: 0 0 6px;
}

.cols {
  column-count: 3;
  column-gap: 16px;
  /* без цього рядка обидва блоки виглядали б однаково */
  height: 110px;
  font-size: 13px;
  line-height: 1.4;
  border: 1px solid #bbb;
  padding: 8px;
  margin-bottom: 18px;
}

.balance {
  column-fill: balance;
}

.fill {
  column-fill: auto;
}

HTML

<p>Вибери потрібне значення для <code>column-fill</code>:</p>

<p><strong>Увага! На даний момент використання цієї властивості обмежене і не працює в жодному сучасному браузері!</strong></p>

<div class="inputs">
  <input id="auto" checked name="column-fill" type="radio"/>
  <label for="auto">auto</label>
  <message for="auto">Контент рівномірно розподіляється між колонок. Ширина стовпчиків буде однаковою. За замовчуванням.</message>
  
  <input id="balance" name="column-fill" type="radio"/>
  <label for="balance">balance</label>
  <message for="balance">Стовпці заповнюються послідовно. Ширина стовпчиків буде різною.</message>
</div>

<p id="message">Контент рівномірно розподіляється між колонок. Ширина стовпчиків буде однаковою. За замовчуванням.</p>

<hr>

<div id="block">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat.</p>
</div>

CSS

* {
  box-sizing: border-box;
  padding: 0;
}

body {
  text-align: center;
  font-family: monospace;
  font-size: 17px;
  line-height: 1.5;
  color: #222;
}

#form {
  padding: 8px 16px;
  font-size: 19px;
}

#block {
  color: #353535;
  background: gold;
  padding: 10px;
  margin-bottom: 36px;

  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;

  -webkit-column-rule: 2px dashed #666;
  -moz-column-rule: 2px dashed #666;
  column-rule: 2px dashed #666;

  -webkit-column-fill: auto; /* Safari and Chrome */
  -moz-column-fill: auto; /* Firefox */
  column-fill: auto; /* CSS3 */
}

#text {
  height: 60px;
  background-color: #eee;
  padding: 16px 0;
}

message {
  display: none;
}

JS

const message = document.querySelector('#message');

document.querySelectorAll('.inputs input').forEach((el) => el.addEventListener('change', function () {

  var messageText = document.querySelector("message[for='" + this.id + "']");
  message.textContent = messageText?.textContent ?? '';

  document.querySelectorAll('#block').forEach((n) => n.style.setProperty('column-fill', this.id));

}));