Многоколоночный текст (columns): Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

В этом блоке заданий вы попрактикуетесь в создании многоколоночного текста с использованием CSS Columns. Задания помогут вам освоить основные свойства для разделения контента на колонки, настройки промежутков и разделителей между ними, а также управления переносами и элементами, охватывающими несколько колонок. Вы будете работать с готовым HTML и CSS кодом, заполняя пропущенные фрагменты для достижения нужного визуального результата. Сложность заданий постепенно возрастает, начиная с базового разделения на колонки и заканчивая более тонкими настройками.

Список тем

Разделение текста на две колонки

Ваша первая задача — разделить текст внутри блока с классом `multi-column-text` на две равные колонки. Используйте свойство, которое напрямую задает количество колонок.

CSS

.multi-column-text {
  padding: 10px;
  border: 1px solid #ccc;
  /* Укажите количество колонок */
  input1: 2;
}

                     .multi-column-text {
  padding: 10px;
  border: 1px solid #ccc;
  /* Укажите количество колонок */
  input1: 2;
}

HTML

<div class="multi-column-text">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
  <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>Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris.</p>
</div>

Чтобы задать количество колонок, используйте свойство `column-count`. Укажите значение `2`, чтобы разделить текст на две колонки.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Установка ширины колонок

Теперь настройте колонки так, чтобы браузер сам определял их количество, но каждая колонка имела минимальную ширину 120 пикселей. Текст должен автоматически распределяться по максимально возможному числу колонок указанной ширины.

CSS

.multi-column-text {
  padding: 10px;
  border: 1px solid #ccc;
  /* Укажите оптимальную ширину колонки */
  input1: 120px;
}

                     .multi-column-text {
  padding: 10px;
  border: 1px solid #ccc;
  /* Укажите оптимальную ширину колонки */
  input1: 120px;
}

HTML

<div class="multi-column-text">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
  <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>Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida.</p>
</div>

Для установки оптимальной ширины колонки, позволяя браузеру автоматически определять их количество, используйте свойство `column-width`. Задайте ему значение `120px`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Добавление промежутка между колонками

Чтобы улучшить читаемость, добавьте промежуток (отступ) размером 25 пикселей между колонками текста в блоке `.multi-column-text`. Используйте соответствующее свойство.

CSS

.multi-column-text {
  padding: 10px;
  border: 1px solid #ccc;
  column-count: 2;
  /* Задайте промежуток между колонками */
  input1: 25px;
}

                     .multi-column-text {
  padding: 10px;
  border: 1px solid #ccc;
  column-count: 2;
  /* Задайте промежуток между колонками */
  input1: 25px;
}

HTML

<div class="multi-column-text">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
  <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>

Для задания расстояния между колонками используется свойство `column-gap`. Установите его значение в `25px`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Стиль разделителя между колонками

Добавьте вертикальный разделитель между колонками. Задайте стиль разделителя как 'dotted' (точечный). Ширина и цвет уже установлены.

CSS

.multi-column-text {
  padding: 10px;
  border: 1px solid #ccc;
  column-count: 2;
  column-gap: 25px;
  column-rule-width: 1px;
  column-rule-color: #aaa;
  /* Задайте стиль разделителя */
  input1: dotted;
}

                     .multi-column-text {
  padding: 10px;
  border: 1px solid #ccc;
  column-count: 2;
  column-gap: 25px;
  column-rule-width: 1px;
  column-rule-color: #aaa;
  /* Задайте стиль разделителя */
  input1: dotted;
}

HTML

<div class="multi-column-text">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
  <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>

Для стилизации разделителя между колонками используется свойство `column-rule-style`. Установите его значение в `dotted`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Использование сокращенного свойства columns

Используйте сокращенное свойство `columns`, чтобы одновременно установить количество колонок равным 2 и их оптимальную ширину в 100 пикселей. Это позволит вам задать оба параметра одним свойством.

CSS

.multi-column-text {
  padding: 10px;
  border: 1px solid #ccc;
  /* Используйте сокращенное свойство для задания ширины и количества колонок */
  input1: 100px 2;
}

                     .multi-column-text {
  padding: 10px;
  border: 1px solid #ccc;
  /* Используйте сокращенное свойство для задания ширины и количества колонок */
  input1: 100px 2;
}

HTML

<div class="multi-column-text">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
  <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>Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida.</p>
</div>

Сокращенное свойство `columns` позволяет задать `column-width` и `column-count` одновременно. Значения указываются через пробел. Например: `columns: 100px 2;` или `columns: 2 100px;`. Порядок не имеет значения.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Элемент, охватывающий все колонки

Сделайте так, чтобы заголовок `<h2>` внутри блока `.multi-column-text` не разбивался на колонки, а растягивался на всю ширину блока, охватывая все колонки под ним.

CSS

.multi-column-text {
  padding: 10px;
  border: 1px solid #ccc;
  column-count: 3;
  column-gap: 15px;
}

.multi-column-text h2 {
  text-align: center;
  margin-bottom: 15px;
  /* Заставьте заголовок охватывать все колонки */
  input1: input2;
}

                     .multi-column-text {
  padding: 10px;
  border: 1px solid #ccc;
  column-count: 3;
  column-gap: 15px;
}

.multi-column-text h2 {
  text-align: center;
  margin-bottom: 15px;
  /* Заставьте заголовок охватывать все колонки */
  input1: input2;
}

HTML

<div class="multi-column-text">
  <h2>Важный Заголовок</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Чтобы элемент охватывал все колонки, используйте свойство `column-span` со значением `all` для этого элемента.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Предотвращение разрыва элементов внутри колонок

Внутри многоколоночного текста есть список `ul`. Сделайте так, чтобы элементы списка `li` не разрывались между колонками, то есть каждый элемент списка целиком оставался в одной колонке.

CSS

.multi-column-list {
  padding: 10px;
  border: 1px solid #ccc;
  column-count: 2;
  column-gap: 20px;
}

.multi-column-list ul {
  padding-left: 20px;
  margin: 0;
}

.multi-column-list li {
  margin-bottom: 8px;
  /* Запретите разрыв элемента списка между колонками */
  input1: input2;
}

                     .multi-column-list {
  padding: 10px;
  border: 1px solid #ccc;
  column-count: 2;
  column-gap: 20px;
}

.multi-column-list ul {
  padding-left: 20px;
  margin: 0;
}

.multi-column-list li {
  margin-bottom: 8px;
  /* Запретите разрыв элемента списка между колонками */
  input1: input2;
}

HTML

<div class="multi-column-list">
  <ul>
    <li>Пункт 1: Довольно длинный текст, который может перенестись на другую колонку.</li>
    <li>Пункт 2: Короткий пункт.</li>
    <li>Пункт 3: Еще один пункт с некоторым количеством текста для демонстрации.</li>
    <li>Пункт 4: Изображение <img src="https://naytikurs.ru/img/1.png" alt="img" style="height: 20px; vertical-align: middle;"> внутри пункта.</li>
    <li>Пункт 5: Последний пункт в этом списке.</li>
  </ul>
</div>

Чтобы предотвратить разрыв элемента (например, `li`) между колонками, используйте свойство `break-inside` со значением `avoid` для этого элемента.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Настройка разделителя колонок (сокращенное свойство)

Используйте сокращенное свойство для определения разделителя между колонками. Установите разделитель толщиной 2 пикселя, сплошным стилем ('solid') и синим цветом ('blue').

CSS

.multi-column-text {
  padding: 10px;
  border: 1px solid #ccc;
  column-count: 2;
  column-gap: 30px;
  /* Задайте разделитель: 2px solid blue */
  input1: 2px solid blue;
}

                     .multi-column-text {
  padding: 10px;
  border: 1px solid #ccc;
  column-count: 2;
  column-gap: 30px;
  /* Задайте разделитель: 2px solid blue */
  input1: 2px solid blue;
}

HTML

<div class="multi-column-text">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
  <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>

Сокращенное свойство `column-rule` позволяет одновременно задать ширину (`column-rule-width`), стиль (`column-rule-style`) и цвет (`column-rule-color`) разделителя. Значения указываются через пробел, например: `column-rule: 2px solid blue;`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку