<span>Цей заголовок, так само як й інший вміст контейнеру ділиться на колонки.</span>
<div class="multicol">
  <h4>Це просто заголовок.</h4>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Possimus cumque porro veritatis, alias laudantium perferendis facilis corrupti. Maxime, quia vel?</p>
</div>
<span>А тут, за допомогою властивості <code>column-span</code>, ми вказали, щоб заголовок не ділився на колонки.</span>
<div class="multicol rule">
  <h4>Це просто заголовок.</h4>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint facilis vero quisquam delectus neque quia modi quae voluptatem magnam sit!</p>
</div>
body {
  font-family: sans-serif;
  line-height: 1.45;
}

h4 {
  margin-top: 0;
}

.multicol {
  background: #eee;
  padding: 10px;
  margin-bottom: 16px;

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

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

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

.multicol.rule h4 {
  column-span: all;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.