Розміщення тексту в колонках у CSS

Вивчаємо властивості column-count, column-width, columns, column-gap, column-rule та column-span для створення багатоколонкового тексту.

Розміщення тексту в колонках у CSS

CSS дозволяє автоматично розбивати текст на кілька колонок, подібно до газет або журналів. Для цього використовується набір властивостей Multi-column Layout.

Основні властивості

column-count — кількість колонок.
column-width — бажана ширина колонки.
columns — скорочений запис column-width і column-count.
column-gap — відстань між колонками.
column-rule — лінія між колонками.
column-span — дозволяє елементу займати всі колонки.

column-width

Властивість задає бажану ширину колонки. Браузер сам визначає, скільки колонок поміститься.


.text {
  width: 80%;
  column-width: 300px;
}

column-count

Встановлює точну кількість колонок незалежно від їх ширини.


.text {
  width: 1000px;
  column-count: 4;
}

columns

Скорочений запис для одночасного задання кількості та ширини колонок.


.text {
  columns: 250px 3;
}

column-gap

Задає відстань між сусідніми колонками.


.text {
  column-count: 4;
  column-gap: 30px;
}

column-rule

Додає вертикальну лінію між колонками.


.text {
  column-count: 4;
  column-gap: 30px;
  column-rule: 2px dashed gray;
}

column-span

Дозволяє окремому елементу займати всю ширину колонок. Зазвичай використовується для заголовків.


<div class="text">
  <h2>Заголовок</h2>

  <p>...</p>
  <p>...</p>
</div>


.text {
  column-count: 3;
}

.text h2 {
  column-span: all;
}


.article {
  width: 1000px;

  column-count: 3;
  column-gap: 25px;
  column-rule: 1px solid lightgray;
}

❗ Важливо:

Не рекомендується використовувати багато колонок на вузьких екранах. Для мобільних пристроїв зазвичай залишають одну колонку.

Практичні завдання

📌 Завдання:

№1. Є div шириною 80%. Розбийте текст на колонки шириною 300px.
№2. Є div шириною 1000px. Розбийте текст на 4 колонки.
№3. Додайте між колонками відстань 30px.
№4. Додайте між колонками сіру пунктирну лінію.

💡 Показати підказку

Спочатку використайте column-count або column-width, потім додайте column-gap, а після цього оформіть межу за допомогою column-rule.

✅ Показати відповідь


<!-- HTML -->

<div class="text">
  Довгий текст...
</div>

<!-- CSS -->

.text {
  width: 1000px;

  column-count: 4;
  column-gap: 30px;
  column-rule: 2px dashed gray;
}