Как убрать двойные границы в CSS Grid: border-collapse

Быстрый ответ

Чтобы избавиться от двойных границ в CSS Grid, следует применять границы к элементам сетки только с одной стороны. Используйте псевдокласс :not() в сочетании с селектором :last-child для создания границ с равномерной шириной. Вот пример реализации:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid-item {
  background: white;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}

.grid-item:nth-child(3n) {
  border-right: none;
}

/* Если количество рядов фиксировано */
.grid-item:nth-last-child(-n+3) {
  border-bottom: none;
}

Имейте в виду: применение границ справа и снизу, а потом их исключение у каждого третьего элемента (в случае 3 столбцов – 3n) – отличный трюк! Если количество рядов известно, просто уберите нижнюю границу у последних элементов ряда, чтобы получить четкий вид.

Мастерим в навыках CSS Grid

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

Использование свойства grid-gap

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

Подробнее об этом расскажет наш спикер на видео

Отступы и контуры – не в мейнстриме, но эффективны

Чтобы избежать двойных границ, мы регулируем позиционирование элементов с помощью margin: 0 -1px -1px 0;: отдельные ячейки скрывают границы своих соседей, покрывая их собой. Контур элемента (outline) формирует четкую линию вокруг каждого из них.

Внедрение box-sizing

Примените box-sizing: content-box; для достижения полного контроля над размерами сетки и исключения влияния отступов и границ на них. Так вы удержите границы сетки непоколебимыми.

Визуализация

Представим, что мы строим забор из ячеек CSS Grid:

Накладка контролирует:    Без накладки вопрос четкий:

  🟦🔲🟦🔲🟦🔲🟦               🟦🟦🟦🟦🟦 
  🔲🟦🔲🟦🔲🟦🔲               🔲🟦🟦🟦🟦🔲
  🟦🔲🟦🔲🟦🔲🟦               🟦🟦🟦🟦🟦🟦
  🔲🟦🔲🟦🔲🟦🔲               🔲🟦🟦🟦🟦🔲

🟦 – это ячейка с границей, 🔲 – это ячейка, страдающая от двойных границ.

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

Интерактивность и отзывчивость для динамичной сетки

Чтобы сформировать сетку, которая будет адаптивна относительно содержимого и размера экрана, используйте repeat(auto-fill, minmax(100px, 1fr)). Так можно создавать колонки, которые подстраиваются под содержимое, обеспечивая в то же время минимальные и максимальные размеры, что гарантирует отзывчивость дизайна.

Повышение интерактивности при помощи состояний наведения

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

Тонкая настройка позиционирования элементов

Использовав position: relative;, вы сможете тщательно управлять положением содержимого в каждой ячейке сетки. Не забывайте назначить каждому элементу класс .grid-item и добавить соответствующую HTML-разметку для корректного отображения.

Вспоминаем об альтернативных вариантах

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

Полезные материалы

1. CSS grid layout – CSS: Cascading Style Sheets | MDN — Ваша основная наставница и справка по CSS Grid.
2. A Complete Guide to CSS Grid | CSS-Tricks — Тут вы обнаружите глубокие разъяснения и практические примеры всех аспектов CSS Grid.
3. CSS Grid Gotchas And Stumbling Blocks — Smashing Magazine — Выясните, как преодолевать типичные сложности при использовании CSS Grid.
4. Grid Garden – A game for learning CSS grid layout — Занимательный и интерактивный метод освоения CSS Grid, обучение пройдет незаметно.
5. Grid by Example – Usage examples of CSS Grid Layout — Ознакомьтесь с реальными примерами использования CSS Grid для преодоления сложностей компоновки.
6. CSS Grid Layout Module Level 1 — Получите официальную спецификацию W3C для модуля макетирования CSS Grid напрямую от создателей.