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

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

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

1. CSS Grid

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

Пример:

2. Flexbox

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

Пример:

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

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

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

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

HTML:

CSS: