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

Потребовалось создать макет в газетном стиле. Блоки анонсов должны быть разделены вертикальными линиями с учётом адаптивной вёрстки. При увеличении или уменьшении экрана с flexbox или grid (либо js), рамки будут неизбежно отображаться справа или слева. Этого нужно избежать, оставляя рамки лишь между блоками.

Правильно: article | article | article | article
Правильно: article | article | article
Правильно: article | article
Правильно: article

Не правильно: | article | article | article | article
Не правильно: | article | article | article
Не правильно: | article | article
Не правильно: | article

Ответ или решение

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

Вот пошаговое решение вашей задачи:

Шаг 1: Создайте контейнер с дисплеем grid

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

<div class="container">
  <div class="article">Статья 1</div>
  <div class="article">Статья 2</div>
  <div class="article">Статья 3</div>
  <div class="article">Статья 4</div>
  <!-- Добавьте столько блоков, сколько нужно -->
</div>

Шаг 2: Настройте сетку с помощью CSS Grid

В CSS задайте для контейнера display: grid и используйте свойства grid-template-columns и grid-gap (или современные эквиваленты gap).

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  column-gap: 2px; /* Размер вертикальной линии */
}

• repeat(auto-fit, minmax(200px, 1fr)): Эта функция позволяет автоматически подгонять количество колонок под доступную ширину контейнера. Каждый блок будет иметь минимальную ширину 200px и максимально заполнять доступное пространство.
• column-gap: Задает расстояние между колонками. Мы используем это свойство для создания пространства, которое затем будет заполнено вертикальными линиями.

Шаг 3: Установите фон для вертикальных линий

Мы будем использовать фон контейнера для создания вертикальных линий между блоками. Задайте цвет фона контейнера — это будет цвет вертикальных линий.

.container {
  background-color: #000; /* Цвет вертикальных линий */
}

Шаг 4: Установите фон для блоков статей

Задайте фон для элементов внутри контейнера, чтобы они перекрывали фон контейнера кроме областей между колонками (т.е., вертикальных линий).

.article {
  background-color: #fff; /* Цвет фона блоков */
}

Шаг 5: Обнулите внутренние и внешние отступы блоков

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

.article {
  margin: 0;
  padding: 0;
}

Полный пример CSS

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  column-gap: 2px; /* Ширина вертикальных линий */
  background-color: #000; /* Цвет вертикальных линий */
}

.article {
  background-color: #fff; /* Цвет фона блоков */
  margin: 0;
  padding: 10px; /* По желанию: внутренние отступы внутри блоков */
  box-sizing: border-box; /* Учитываем отступы в общей ширине блока */
}

Объяснение того, почему этот метод работает

• Адаптивность сетки: При использовании repeat(auto-fit, minmax(200px, 1fr)) сетка автоматически подстраивается под ширину экрана, изменяя количество колонок. Блоки будут автоматически перенесены на новую строку, если им не хватает места.
• Вертикальные линии только между блоками: Свойство column-gap добавляет промежуток только между колонками, не затрагивая края сетки. Благодаря этому вертикальные линии появляются только между блоками, а не слева или справа от них.
• Использование фоновых цветов: Фоновый цвет контейнера (background-color: #000;) заполняет промежутки между блоками, создавая видимость вертикальных линий. Фоновый цвет блоков (background-color: #fff;) перекрывает фон контейнера, не позволяя вертикальным линиям появляться где не следует.

Преимущества этого метода

• Чистый CSS, без JavaScript: Решение не требует использования JavaScript, что упрощает поддержку и улучшает производительность.
• Кросс-браузерная совместимость: CSS Grid поддерживается современными браузерами. Для старых браузеров можно добавить прогрессивное улучшение или полифиллы, если это необходимо.
• Простота и гибкость: Легко настроить ширину вертикальных линий и минимальную ширину блоков для достижения желаемого дизайна.

Дополнительные настройки и улучшения

• Изменение ширины вертикальных линий: Для изменения ширины линий просто измените значение column-gap.
• Изменение цвета линий: Измените background-color у контейнера на нужный цвет.
• Поддержка темных и светлых тем: Можно динамически менять цвета фона контейнера и блоков для поддержки разных тем оформления.

Пример с использованием горизонтальных линий (если требуется)

Если вам понадобятся и горизонтальные линии между рядами блоков, вы можете добавить row-gap и аналогичным образом использовать фоновый цвет контейнера:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  column-gap: 2px; /* Ширина вертикальных линий */
  row-gap: 2px;    /* Высота горизонтальных линий */
  background-color: #000; /* Цвет линий */
}

Поддержка старых браузеров

Если необходимо поддерживать браузеры, которые не поддерживают CSS Grid (например, IE11), можно использовать полифиллы или фоллбеки, но это усложнит код. В большинстве случаев, для современных веб-приложений это не требуется.

Заключение

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