Как можно во flex сетке закрасить отступы gap?

Question

[bldeser]

Всем привет, помогите решить задачку.
Есть первый блок, сетка на флексах. Флекс элементы между собой имеют отступ gap
Есть второй блок, сзади сетки, с черным фоном.
Елементы сетки прозрачные, через них видно черный фон второго блока.
Не могу придумать как закрасить белым цветом промежутки между элементами сетки, чтобы не было видно черного фона?

Пример здесь



Так должно получиться:



Дополнение: Черный фон это просто пример, фоном может быть изображение. Поэтому вариант флекс-белый фон, элементы- черный фон, не подходит.

Comments

[Александр Васильев]

Gap не покрасить, он еще более «прозрачный», чем элементы сетки.
Придется колхозить псевдо-бордеры-бэкграунды.

[Ankhena]

Александр Васильев, не то, чтобы прям gap, но вот будущее https://www.w3.org/TR/2025/WD-css-gaps-1-20250417/

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

[bldeser]

Ankhena, Не совсем понял. Флекс то можно покрасить в белый, но и элементы тоже быдут белыми даже с прозрачностью, а мне надо чтобы в элементах был виден фон заднего блока, черный (но вообще это для примера, там картинка будет вместо черного фона).

[Ankhena]

bldeser,

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

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

[bldeser]

Ankhena, Вопрос отредактировал

[Ankhena]

bldeser, простой способ в лоб: добавить span.
Веселее - закрасить ячейки радиальным градиентом.
Наверное, ещё веселее приладить туда маску.
Или ещё что-нибудь, что сейчас не пришло мне в голову.

[Александр Васильев]

Ankhena, прекрасное далёко

[bldeser]

Ankhena, Добавить span, это куда? )

[Ankhena]

Александр Васильев, есть такое. Но по сравнению с вырезанием скругленных уголков из png и рассовыванием их по угловым ячейкам таблицы, мы уже практически в раю.

[Ankhena]

bldeser, вокруг текста. Скруглить, задать тень. Лишнее обрезать.

По дороге можно заменить флексы на гриды, чтобы не смотреть на вот это flex: 1 0 calc(25% - 10px)

[Ankhena]

bldeser, можно и без спана, а псевдик абсолютом воткнуть с той же тенью, что и у спана.

[bldeser]

Ankhena, я про текст ничего не писал, его там может не быть ) У меня был вариант элементам сделать box-shadow белого цвета, но опять же, при определенном значении она налезает на соседние элементы.

[Ankhena]

bldeser,

элементам сделать box-shadow белого цвета, но опять же, при определенном значении она налезает на соседние элементы.

Разумеется.
Поэтому спан или псевдо.

Answer 1

[Wispik]

фон делаешь белым цветом, а у .grid-item фон черным

Comments

[bldeser]

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

[Wispik]

bldeser, ну так надо делать песочницу как должно быть, вопрос то тогда не понятен. Сделай у grid-field background белым, а сами ячейки черными

[bldeser]

Wispik, Там ссылка есть на песочницу. Вопрос отредактировал.

[Wispik]

bldeser, ну тогда я правильно написал. У grid-field фон белый, у ячейки черный

[bldeser]

Wispik, Ячейки не надо трогать, они прозрачные. Мой вопрос как закрсить отступы между ячейками.

[godsplan]

bldeser, если можно без скругнлений ячейки, то просто добавь бордер 2-3пх и убери гэп у флекс контейнера