Как сделать — сетку с тремя столбцами
Узнайте, как создать сетку макета с тремя столбцами с помощью CSS.
Column 1
Column 2
Column 3
Создание макета трех столбцов
Шаг 1) добавить HTML:
Пример
Шаг 2) добавить CSS:
В этом примере мы создадим три равные колонки:
Пример
/* Clear floats after the columns */
.row:after <
content: "";
display: table;
clear: both;
>
В этом примере мы создадим три неравных столбца:
Пример
В этом примере мы создадим адаптивную компоновку трех столбцов:
Пример
Совет: Перейдите на наш сайт CSS верстка учебник, чтобы узнать больше о макетов веб-сайта.
Совет: Перейти на наш CSS отзывчивый веб-дизайн учебник, чтобы узнать больше о отзывчивый веб-дизайна и сеток.
Размещение текста в три колонки
Практически в каждом сайте при его создании используются блоки вывода в которых текст нужно размещать в две или три колонки одинаковой ширины. Это реализуется с использованием стилей CSS.
Примеры размещения блоков в три колонки на CSS
Inline-block
Элементы со свойством display: inline-block встают в одну строку, но у них появляются отступы, чтобы их убрать можно указать e родительского блока font-size: 0 или white-space: nowrap.
HTML код блоков с CSS свойством Inline-block
CSS код блоков с CSS свойством Inline-block
Display table
Второй метод основан на табличном отображении элементов со свойством table
HTML код блоков с CSS свойством table
CSS код блоков с CSS свойством table
Float
CSS свойство float выравнивает элемент по левому краю left, но имеет недостатки – требуется сброс потока свойством overflow: hidden у родителя или clearfix.
HTML код блоков с CSS стилем float
CSS код блоков с CSS стилем float
Flexbox
Flexbox – способ выстраивания элементов по оси. Состоит из контейнера (flex container) и динамических элементов (flex items).
Column
Набор свойств columns позволяет вывести текст в несколько колонок автоматически, при этом не возможно предугадать в каком месте текста начнется новая колонка.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit magna eu tempus ullamcorper. Sed porta justo sed nibh elementum condimentum. Quisque non eros sit amet elit commodo maximus eget a eros.
Верстка трехколоночного макета страницы с помощью CSS
В тот момент, когда я стал переходить на дивовую верстку, а произошло это почти год назад (как быстро летит время), одним из серьезных уроков, которые я должен был освоить, был простой и удобных способ верстки трехколоночного макета страницы с использованием <div> ‘ов и каскадных таблиц стилей.
Хорошо, когда кто-то уже сделал подобное до тебя, не приходится заново “придумывать колесо”. Достаточно найти готовое решение, которое следует хорошенько запомнить и адаптировать под себя, если потребуется. Моим замечательным помощником по данному вопросу стал уже не однократно упоминаемый мной сайт Layout Gala, на котором предлагается множество хороших макетов для верстки страниц со всевозможными вариантами представления контента.
Оный макет хорошо зарекомендовал себя, поэтому я его постоянно использую на практике.
Особенности данного макета:
- Текучая (резиновая) верстка — растяжка происходит за счет контентной части, левая и правая колонки фиксированные. Я так полагаю, что этот макет можно изменить и под одновременное растяжение всех 3-х частей. Но пока мне этого не приходилось делать.
- Используется фактор внутренней поисковой оптимизации — блок с контентом расположен в коде до начала левой и правой колонки. Этот один из моих любимых моментов в дивовой верстке. Контент начинается практически в самом начале разметки страницы. При желании можно и хэдер, если он достаточно большой, разместить ниже кода контента.
Реализация в этом макете трех нужных колонок достигается за счет использования плавающих блоков (контент, левая и правая колонки) и отрицательных отступов для левой и правой колонок.
Структура HTML-кода
При использовании оригинального кода макета с Layout Gala в нашем “любимом” IE наблюдался следующий баг — при быстром сужении окна браузера левая колонка съезжала к центру. Чтобы от этого избавиться, я поместил блоки контента и обоих колонок в дополнительный контейнер с и указал ему ширину в 100%.
CSS-таблицы
Приведу здесь только ту часть CSS-кода, которая формирует 3 колонки в блочном варианте верстки (остальное будет в примере). Прошу обратить внимание, что для того, чтобы сработало CSS-свойство #container
Пример
Можно посмотреть на готовый пример макета страницы в три колонки с использованием блочной верстки (2 колонки фиксированные).
Колонки — Основы верстки контента
Создание колонок с текстом, до прихода стандарта CSS3, было достаточно сложным делом. Приходилось использовать различные свойства позиционирования и следить за тем, чтобы колонки не «развалились» в процессе добавления информации.
Посмотрите на пример выше. При всей визуальной легкости, создание такого макета вызывало трудности. Чаще всего проблема возникала в переносе текста в колонках. Для решения этой задачи использовали несколько блоков со строго отведенной информацией. Ни о каких автоматических переносах или изменении статьи не могло идти и речи.
Сейчас же эта задача решается всего двумя(!) свойствами. Эти и некоторые другие свойства мы рассмотрим в данном уроке.
Создание колонок
Для создания колонок в CSS существует свойство column-count . Оно полностью соответствует своему названию. Достаточно указать количество колонок и браузер все сделает за вас.
Важно: информация внутри колонок обрабатывается «как есть». Это значит, что все отступы сохраняются. В случае с параграфами стоит сбрасывать верхний отступ. Это позволит держать первый параграф на одной линии с другими колонками.
По умолчанию колонки делятся равномерно внутри контейнера и суммарно они займут все доступное пространство. Повлиять на это поведение можно свойством column-width — с его помощью задается оптимальная ширина колонок. Слово «оптимальная» является главным. В отличие от свойства width , здесь не устанавливается четкая ширина, и, если места в контейнере хватает, то колонки будут растягиваться на всю доступную ширину.
Зачем нужно такое поведение? Представьте, что у нас есть длинный текст в две колонки. Например, как в первом изображении в этом уроке. Без указания оптимальной ширины браузер будет выстраивать две колонки при любой ширине устройства. Если эта ширина будет 300 пикселей, то колонки поделятся по 150 пикселей. Ужасная картина.
Чтобы не допустить такого, можно выставить оптимальную ширину. Если браузер не сможет выдать такую ширину колонке, то контент будет выстроен в одну колонку. Вот уже и адаптивность. А ведь это только первые уроки 🙂
Эту запись можно сократить. В CSS используется свойство columns для сокращения свойств column-count и column-width . Последний пример можно записать так:
Первым значением записывается ширина колонки, а вторым их количество
Перейдите на сайт CodePen и попробуйте сузить окно браузера. В определенный момент колонки уйдут, и весь текст будет выстроен в одну колонку.
Отступы между колонками
В примерах выше вы могли заметить, что браузеры автоматически проставляют отступы между колонками. Чаще всего не стоит доверять браузеру. Одно из правил верстки и программирования: явное лучше неявного. По умолчанию расстояние между колонками равно 1em . Единица измерения em отсчитывается от размера шрифта. Если размер шрифта равен 16 пикселям, то и 1em равен 16 пикселям.
Задать отступы между колонками можно с помощью свойства column-gap . Кстати, это свойство вы встретите еще много раз. Оно достаточно универсально.
Вы можете использовать различные единицы измерения внутри свойства column-gap . Для примера возьмем значения в пикселях. В будущих уроках вы познакомитесь и с другими единицами измерения.
Попробуйте изменить значение свойства column-gap и посмотрите, как это повлияет на колонки.
Границы между колонками
Модуль CSS Multi-column Layout позволяет задавать визуальную границу между колонками. Если вы знакомы со свойством border , которое устанавливает границы у блоков, то поведение вам будет знакомо. Раньше создание границ между колонками необходимо было реализовывать самостоятельно, что тоже не радовало верстальщиков.
Для создания границы используется свойство column-rule , которое является краткой записью следующих свойств:
- column-rule-width — ширина границы.
- column-rule-style — тип границы. Значения совпадают со значениями свойства border .
- column-rule-color — цвет границы.
Вы можете указывать как три отдельных свойства, так и краткую запись.
Добавление контента в несколько колонок
Если представить себе газету, то там не всегда текст идет строго по колонкам. Частая ситуация — заголовок, который накладывается на все колонки, как бы разделяя их по горизонтали.
Для разделения колонок используется свойство column-span . Оно принимает всего два значения:
- none — значение по-умолчанию. Текст находится просто внутри колонок.
- all — текст «выходит из колонки» и разделяет их.
Перенос колонок
В примерах можно заметить, что все элементы внутри колонок переносятся автоматически. Это неплохое решение для текста, но если существуют небольшие блоки, и нам явно не нужно, чтобы информация внутри них переносилась, то без помощи сторонних свойств не обойтись. Как же контролировать перенос контента внутри колонок? Для этого существует несколько правил, о которых поговорим в этом разделе.
- break-before
- break-after
- break-inside
По названию уже можно понять, что речь идет о переносе до/после и внутри. Все три свойства принимают огромное количество значений, так как рассчитаны не только для колонок, но и для вывода на печать.
При работе с CSS Multi-column Layout нас больше всего интересует значение avoid , которое запрещает перенос.
Взгляните на элемент figure. Он состоит из изображения и подписи к нему. Для наглядности обведем его границей и увидим, что изображение находится в одной колонке, а подпись уже в другой. Это плохой вариант верстки текста. Без границы совершенно непонятно что текст — лишь подпись изображения, а не самостоятельный текст.
Этот перенос происходит внутри элемента figure. Для запрета такого переноса можно воспользоваться свойством break-inside и запретить перенос внутри данного элемента.
Самостоятельная работа
Найдите любую газетную статью. Используя CSS Multi-column Layout воссоздайте журнальную верстку.
Дополнительные материалы
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты.
Об обучении на Хекслете
- Статья «Как учиться и справляться с негативными мыслями»
- Статья «Ловушки обучения»
- Статья «Сложные простые задачи по программированию»
- Урок «Как эффективно учиться на Хекслете»
- Вебинар «Как самостоятельно учиться»
Для полного доступа к курсу нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.