Отступы в гридах и флексбоксах. Опять

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

Использование свойства gap в CSS Grid и Flexbox

1. CSS Grid

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

Пример:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px; /* одинаковый промежуток по горизонтали и вертикали */
}

.grid-container-2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 20px; /* 10px по вертикали, 20px по горизонтали */
}

2. Flexbox

В Flexbox свойство gap работает аналогично, за исключением того, что оно не поддерживает разные промежутки по горизонтали и вертикали (так как Flexbox не имеет двухмерной структуры).

Пример:

.flex-container {
  display: flex;
  gap: 20px; /* промежуток между элементами */
}

Декорирование промежутков между элементами

Если вы хотите декорировать промежутки между элементами (например, добавить границы, тени или градиенты), можно использовать псевдоэлементы и другие CSS-свойства.

Пример декорирования промежутков с помощью псевдоэлементов

Допустим, у вас есть сетка, и вы хотите добавить декоративные линии между элементами.

HTML:

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  position: relative;
}

.grid-item {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
}

/* Добавляем декоративные линии между элементами */
.grid-container::before,
.grid-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.grid-container::before {
  background-image: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent calc(100% - 20px),
    #ccc calc(100% - 20px),
    #ccc 100%
  );
}

.grid-container::after {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(100% - 20px),
    #ccc calc(100% - 20px),
    #ccc 100%
  );
}