<div class="multicol">
  <h3>Заголовок</h3>
  <p>Це дуже довгий список:</p>
  <ul>
    <li>Пункт номер 1</li>
    <li>Пункт номер 2</li>
    <li>Пункт номер 3</li>
    <li>Пункт номер 4</li>
    <li>Пункт номер 5</li>
    <li>Пункт номер 6</li>
    <li>Пункт номер 7</li>
    <li>Пункт номер 8</li>
    <li>Пункт номер 9</li>
    <li>Пункт номер 10</li>
  </ul>
  <p>Завдяки властивості <code>break-inside: avoid;</code> список (той що ліворуч) розташований в одній колонці, хоча у першій ще залишилося для нього місце!</p>
</div>
.multicol {
  background-color: lightyellow;
  padding: 10px;

  /* Safari and Chrome */
  -webkit-column-count: 3;
  -webkit-column-rule: 2px dotted coral;

  /* Firefox */
  -moz-column-count: 3; 
  -moz-column-rule: 2px dotted coral;

  /* CSS3 */
  column-count: 3; 
  column-rule: 2px dotted coral;
}

.multicol ul {
  -webkit-column-break-inside: avoid;
  column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.