CSS column-count — розбити текст на колонки

HTML

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

CSS

.cols {
    column-count: 3;
}

HTML

<p>column-count: 3 — картки рве між колонками</p>
<div class="cols">
  <div class="card"><b>Київ</b><br>Столиця, місто-герой, розташоване на Дніпрі.</div>
  <div class="card"><b>Львів</b><br>Історичний центр внесено до списку ЮНЕСКО.</div>
  <div class="card"><b>Одеса</b><br>Найбільший морський порт країни на Чорному морі.</div>
  <div class="card"><b>Харків</b><br>Перша столиця, великий університетський центр.</div>
  <div class="card"><b>Дніпро</b><br>Місто на обох берегах Дніпра, промисловий вузол.</div>
</div>

<p>те саме + break-inside: avoid на картках</p>
<div class="cols keep">
  <div class="card"><b>Київ</b><br>Столиця, місто-герой, розташоване на Дніпрі.</div>
  <div class="card"><b>Львів</b><br>Історичний центр внесено до списку ЮНЕСКО.</div>
  <div class="card"><b>Одеса</b><br>Найбільший морський порт країни на Чорному морі.</div>
  <div class="card"><b>Харків</b><br>Перша столиця, великий університетський центр.</div>
  <div class="card"><b>Дніпро</b><br>Місто на обох берегах Дніпра, промисловий вузол.</div>
</div>

CSS

body {
  font-family: sans-serif;
  font-size: 14px;
  padding: 12px;
}

p {
  margin: 18px 0 8px;
  font-family: monospace;
  color: #444;
}

.cols {
  column-count: 3;
  column-gap: 16px;
  column-rule: 1px solid #ccc;
}

.card {
  margin: 0 0 10px;
  padding: 8px;
  background-color: #eef2fa;
  border-left: 3px solid #4a6fa5;
}

.keep .card {
  break-inside: avoid;
}

HTML

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

<input type="number" id="val" placeholder="число" value="3" min="0">

<hr>

<div id="block">
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <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 {
  background: gold;
  padding: 10px;
  margin-bottom: 36px;
  -webkit-column-count: 3; /* Safari and Chrome */
  -moz-column-count: 3; /* Firefox */
  column-count: 3; /* CSS3 */
}

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

message {
  display: none;
}

JS

document.querySelectorAll('#val').forEach((el) => el.addEventListener('change', function () {
  document.querySelectorAll('#block').forEach((n) => n.style.setProperty('column-count', this.value));
}));

HTML

<p>В цьому контейнері чотири стовпці. Ми досягли цього, встановивши значення 4 для <code>column-count</code>.</p>
<div class="multicol col4">
  <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>

  <p>Для блоку не задана властивість <code>column-count</code></p>
<div class="multicol">
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

CSS

.multicol {
  font-family: sans-serif;
  color: #353535;
  background: gold;
  padding: 10px;
  margin-bottom: 36px;
}
p{
  font-size: 18px;
}
.col4 {
  -webkit-column-count: 4; /* Safari and Chrome */
  -moz-column-count: 4; /* Firefox */
  column-count: 4; /* CSS3 */
}