Перейти к основному содержимому

CSS Gap Decorations – новые бордеры во флексах и гридах?

·92 слов·1 минута·
Александр Мунько
Автор
Александр Мунько
Любитель порассказывать про Фронтенд
CSS Gap Decorations - Эта статья является частью серии.
Часть 1: Текущая Статья
Полезные ссылки

Microsoft в очередной раз продвигает идеи в мире CSS – в этот раз CSS Gap Decorations.

На изображении демонстрация наложения Gap Decorations: сначала будут отрисованы вертикальные разделители, а уже поверх них – горизонтальные
Пример границ внутри gap’ов

Зачем это нужно? Цель очень проста – научится расставлять границы между строками и колонками во флексах и гридах. Очень напоминает column-rule для многоколоночной вёрстки.

А самое крутое в этом всём то, что можно будет настроить отступы между границами (даже отрицательные) и порядок наложения!

На изображении демонстрация горизонтальных отступов между Gap Decorations
Пример отрицательных отступов для границ

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

CSS Gap Decorations - Эта статья является частью серии.
Часть 1: Текущая Статья