Методы создания газетного макета с помощью CSS-сетки и границ между элементами

Методы создания газетного макета с помощью CSS-сетки и границ между элементами

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

Методы создания газетного макета с помощью CSS-сетки и границ между элементами

Проект сопровождался несколькими требованиями:

Показать контуры сетки

Столбцы могут быть шире или длиннее других

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Разделительные линии должны быть показаны между различными блоками

CSS Grid: обучение старого макета новым трюкам

Макеты газет могут стать головной болью, потому что обычный CSS является одномерным, что означает, что элементы перемещаются по горизонтальной или вертикальной оси. Даже современная компоновка flexbox все равно имеет одно направление.

Для такого макета нам бы хотелось, чтобы свойства, которые когда-то были предоставлены хорошими старыми таблицами HTML, давали возможность растягивать ячейки во всех направлениях. Мы также хотели бы получить преимущества современного CSS, со всей оперативностью и гибкими границами, которые могут растягиваться, чтобы заполнить доступное пространство.

Сетка CSS сочетает в себе лучшее из таблиц с лучшим из гибких блоков. На самом деле, сетка еще лучше, потому что она предоставляет свойство grid-gap для создания зазоров между ячейками, принимая во внимание доступное пространство. Каким бы мощным это ни было, как мы можем создать разделительные линии точно в середине этих желобов?
Давайте рассмотрим три метода, как это сделать.

Что мы создаем

Во-первых, мы создадим упрощенную версию дизайна газеты, которая поможет проиллюстрировать суть трех различных методов, которые мы собираемся рассмотреть. Простота этого дизайна обманчива.

Методы создания газетного макета с помощью CSS-сетки и границ между элементами

Техника 1: Искусственная колонна

Это решение создает «искусственные» колонки, которые позволяют нам рисовать вертикальные линии, а затем размещать сетку поверх. Горизонтальные разделители закрашиваются при необходимости. «Искусственные» колонки создаются с использованием псевдо-селекторов в контейнере сетки.

Настройка линий между колонка

Давайте создадим контейнер с тремя колонками, используя display: grid и псевдо-селекторы (:before и :after), чтобы создать две колонки, которые заполняют 100% высоты контейнера.

Примечание: 33% контейнера не учитывают ширину зазора, поэтому вам придется соответственно компенсировать ее.

Это рассчитывается как: 33% минус (ширина зазора разделить на (количество зазоров умножить на количество зазоров)) разделить на количество зазоров).

Или в нашем случае:

Вместо этого мы могли бы использовать один псевдо-селектор:

Примечание. При использовании только одного псевдо-селектора требуется другой расчет: один для позиционирования, а другой для ширины.

Ширина рассчитывается как: 33% плюс (количество зазоров умножить на ширина зазора) / (количество зазоров умножить на количество колонок).

Опять же, в нашем случае:

Позиция рассчитывается как: 33% минус (количество зазоров умножить на ширина зазора) / (количество зазоров умножить на количество колонок) разделить на 2).

Создаем сетку

Дизайн состоит из четырех блоков контента. Мы собираемся поместить их в контейнер и задать им класс-модификатор для использования в будущем, обеспечив, чтобы их z-index был выше, чем псевдо-селекторы сетки.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Теперь давайте установим белый цвет фона для ячеек (.fp-cell). Таким образом, вертикальные линии не будут просвечивать. Мы также можем установить вертикальный отступ для ячейки в 16 пикселей, который будет соответствовать половине зазора.

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

Вертикальные разделители

Если вы посмотрите на дизайн, только для последних двух ячеек нужны горизонтальные границы. Мы можем задать им класс модификатор.

Отрицательные поля составляют половину ширины зазора.

Техника № 2: Использование цвета фона

Еще один способ создать разделители — это использовать свойство grid-gap. Это решение не обязательно создает «реальное» расстояние между ячейками, а скорее оставляет некоторое пустое пространство, через которое может просвечиваться background-color сетки. Ширина зазора делегируется отступу внутри ячеек сетки.

Поскольку все ячейки имеют дополнительные 16px горизонтального отступа, сетка должна быть смещена на столько же. Контейнер-оболочка позаботится о переполнении.

Техника № 3: Создание границы ячейки

Это решение добавляет правую и нижнюю границу к каждой ячейке. Как и в последнем примере, grid-gap имитируется добавлением отступов к содержимому ячейки. Это означает, что они также должны быть обернуты в дополнительный контейнер.

Как уже упоминалось, каждая ячейка имеет границы справа и снизу. Основным приемом здесь является использование для сетки (асимметричного) отрицательного поля. Это необходимо для компенсации правой границы ячейки.

Заключение

Бритва Оккама предусматривает, что выигрывает самое простое решение. В нашем случае это техника номер два. Но с другой стороны, у остальных решений есть много достоинств, и они могут оказаться полезными, если, например, доступ к DOM невозможен.

Все эти методы будут работать. Выбор правильного метода зависит от конкретного варианта использования. Первый метод использует фактическое свойство grid-gap для создания зазоров, но другие, возможно, легче понять с первого взгляда … и, возможно, легче поддерживать.

Автор: Marco Troost

Источник: https://css-tricks.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook: