Вертикальные разделители между блоками в адаптивной верстке

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

Проблема лишних рамок

При использовании flexbox или css grid легко добавить границу к каждому элементу, но это неизбежно создаст рамку и у крайних блоков. Например, если задать border-right всем элементам, то у последнего блока в строке тоже появится линия. Это не соответствует газетному стилю, где линии нужны только между колонками.

Пример неправильного поведения:

• | статья | статья | статья | - лишняя рамка слева и справа
• статья | статья | - если блоков два, рамка справа у второго не нужна

Решение на Flexbox с использованием псевдоэлементов

Один из самых гибких способов - добавить вертикальные разделители через псевдоэлемент ::after или ::before и управлять их отображением с помощью медиа-запросов.

Пример кода:

.grid {
  display: flex;
  flex-wrap: wrap;
}

.item {
  position: relative;
  padding: 0 15px;
}

.item::after {
  content: '';
  position: absolute;
  right: 0;
  top: 10%;
  height: 80%;
  width: 1px;
  background: #333;
}

.item:last-child::after {
  display: none;
}

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

Решение на CSS Grid

Для сетки на Grid можно использовать свойство column-gap в сочетании с фоновым изображением или псевдоэлементом контейнера. Однако проще всего - добавить разделители через border и сбросить его для первого элемента с помощью :first-child.

Пример:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.item {
  border-left: 1px solid #ccc;
  padding: 10px;
}

.item:first-child {
  border-left: none;
}

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

Адаптивность и медиа-запросы

Чтобы разделители колонок корректно работали на разных экранах, важно учитывать перенос строк. При использовании flex-wrap псевдоэлементы будут работать корректно: линия исчезнет у последнего элемента в каждой строке, если использовать :last-child. Однако если строки переносятся, последний элемент в строке может не быть последним в списке. В таких случаях лучше использовать nth-child с учетом количества элементов в строке.

Пример для 4 колонок:

.item:nth-child(4n)::after {
  display: none;
}

Это скроет разделитель у каждого четвертого элемента, что идеально для сетки из 4 колонок.

Почему не стоит использовать JS

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

Заключение

Используя псевдоэлементы или границы с условиями :first-child/:last-child, вы легко создадите правильные вертикальные разделители между блоками. Эти методы работают как с Flexbox, так и с Grid, и легко адаптируются под любые разрешения экрана.