CSS - Разметка с несколькими колонками

Здравствуйте,future веб-разработчики! Сегодня мы окунемся в захватывающий мир разметки с несколькими колонками в CSS. Как ваш доброжелательный соседский учитель информатики, я здесь, чтобы провести вас через это путешествие с множеством примеров и объяснений. Итак, начнем!

Введение в разметку с несколькими колонками

Представьте, что вы читаете газету. Обратите внимание, как текст организован в аккуратные колонки? Именно это мы и собираемся achieve с помощью CSS, но на веб-страницах! Разметка с несколькими колонками позволяет нам создавать визуально привлекательные и легкие для чтения структуры контента.

Разметка с несколькими колонками CSS - Разметка с тремя колонками

Давайте начнем с базовой разметки с тремя колонками. Это идеально подходит для создания контента в стиле журнала или для организации информации на веб-странице.

<div class="three-column">
<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>
</div>

.three-column {
column-count: 3;
column-gap: 40px;
}

В этом примере мы используем свойство column-count, чтобы specify, что мы хотим три колонки. Свойство column-gap устанавливает пространство между каждой колонкой.

Разметка с несколькими колонками CSS - Установка ширины колонки

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

<div class="flexible-columns">
<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>
</div>

.flexible-columns {
column-width: 200px;
}

Здесь мы используем column-width, чтобы установить ширину каждой колонки в 200 пикселей. Браузер создаст столько колонок, сколько сможет уместить, сохраняя при этом эту ширину.

Разметка с несколькими колонками CSS - Оформление колонок

Теперь давайте добавим немного стиля нашим колонкам. Мы можем добавить границы, изменить цвета фона и многое другое!

<div class="styled-columns">
<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>
</div>

.styled-columns {
column-count: 3;
column-gap: 40px;
column-rule: 4px dotted #ff00ff;
column-rule-style: dotted;
column-rule-width: 4px;
column-rule-color: #ff00ff;
}

В этом примере мы используем column-rule как сокращенное свойство для добавления точечной линии между колонками. Мы также можем установить эти свойства индивидуально с помощью column-rule-style, column-rule-width и column-rule-color.

Разметка с несколькими колонками CSS - Разделение колонок

Иногда вам может понадобиться, чтобы фрагмент контента extendировался на несколько колонок. Давайте посмотрим, как это можно achieve:

<div class="spanning-columns">
<h2>This heading spans all columns</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="span-two">This paragraph spans two columns. 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>
</div>

.spanning-columns {
column-count: 3;
column-gap: 40px;
}

.spanning-columns h2 {
column-span: all;
text-align: center;
}

.span-two {
column-span: 2;
background-color: #f0f0f0;
padding: 10px;
}

Здесь мы используем column-span: all, чтобы сделать заголовок extendированным на все колонки, и column-span: 2, чтобы сделать абзац extendированным на две колонки.

Разметка с несколькими колонками CSS - Фрагментация колонок

Фрагментация refers к тому, как контент分裂ается между колонками. Давайте посмотрим, как мы можем контролировать это:

<div class="fragmented-columns">
<h3>Chapter 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h3>Chapter 2</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

.fragmented-columns {
column-count: 2;
column-gap: 40px;
}

.fragmented-columns h3 {
break-after: column;
}

В этом примере мы используем break-after: column, чтобы обеспечить начало каждого заголовка chapters с верхней части новой колонки.

Связанные свойства

Давайте подведем итог всех свойств, которые мы изучили, в удобной таблице:

Свойство	Описание
column-count	Указывает количество колонок
column-width	Устанавливает ширину каждой колонки
column-gap	Определяет пространство между колонками
column-rule	Краткое свойство для установки линии между колонками
column-rule-style	Устанавливает стиль линии между колонками
column-rule-width	Устанавливает ширину линии между колонками
column-rule-color	Устанавливает цвет линии между колонками
column-span	Позволяет элементу extendироваться на несколько колонок
break-after	Управляет разрывами колонок после элемента

И вот мы и добрались до конца, друзья! Мы совершили путешествие по миру разметки с несколькими колонками в CSS. Помните, что практика makes perfect, так что не бойтесь экспериментировать с этими свойствами. Кто знает? Вы можете создать следующий большой веб-сайт в стиле журнала!

Как говорил мой старый профессор, "CSS как готовка. Сначала вы можете сделать беспорядок, но с практикой вы будете создавать шедевры в кратчайшие сроки!" Так что продолжайте программировать, продолжайте учиться и, самое главное, получайте удовольствие от этого!

Credits: Image by storyset