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

Question

[bldeser]

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

Пример здесь



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



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

Вариант решения: Скорей всего можно проще сделать, но я пришел к такому варианту.
У каждого элемента сетки убрать скругление, сделать контейнером с position: relative и overflow: hidden, и в каждый элемент вложить блок с position: absolute, который бедет скругляться и через который будет видно задний фон, а все просветы закрашиваются с помощью box-shadow.

Что получилось можно посмотреть ЗДЕСЬ

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 белого цвета, но опять же, при определенном значении она налезает на соседние элементы.

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

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

Ankhena, да просто mask залепить на каждый элемент

[Ankhena]

Александр Васильев, есть красивый вариант с маской? Покажите, пожалуйста.

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

Ankhena, не знаю, как бы черный фон в щели не начал проникать))

[bldeser]

Ankhena, Попробовал псевдо элементами. Тот ещё костыль. Работает до определенного радиуса скругления. Если у елемента взять радиус побольше, например 15px, приходится тень делать ещё больше чтобы закрыть щели в центре радиусов, и соответственно тени начинают наезжать на элементы. При небольшом радиусе закрывается, но тоже тютелька в тютельку )

[Ankhena]

bldeser, я вроде всё расписала и про overflow тоже.
Вот:

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

Вы можете взять огромную тень с запасом, например, 100vmax. Это перекроет любые ваши "побольше".
Или использовать кастомные свойства - это для "тютелек".

Если у елемента взять радиус побольше, например 15px

Я вам вот что скажу на будущее: лучше пишите все свои фантазии сразу в вопросе. Ради вас же. Ответы будете получать быстрее и лучше подходящие к проблеме.

[bldeser]

Ankhena, если честно я не разбираюсь в этом, мне нейронка накидывает варианты по вашим советам, и я пытаюсь из этого методом тыка что то получить. Более менее что то получилось.

[Ankhena]

bldeser,

Тот ещё костыль

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

Тогда не странно, что выходят костыли.

Рекомендую обратиться на фриланс.

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

Ankhena, не просвечивает ))

spoiler

[Ankhena]

Александр Васильев, ну да, как с тенью, только кода больше и работает только "прям щас".
Только у масок такого плана есть сложность: пропорции. Использованный вами cover тут вообще никаким боком не подходит. А 100% 100% сломает пропорции скругления.
Аналогично, если блоки будут адаптивными, пусть и квадратными и если радиус не должен зависеть от cqw.

Пока что тень кажется наиболее привлекательным вариантом.

[bldeser]

Ankhena, Я в итоге сделал тенью, свой вариант добавил в конце вопроса.

[Ankhena]

bldeser, Сделайте тень у квадратиков не в половину gap, а чуть больше. Иначе при масштабировании могут быть артефакты.

Внутреннему диву не нужен абсолют (не имеет смысла).
Флексы проще заменить на гриды

Что-то такое должно выйти

#canvasWrapper {
  width: 500px;
  height: 625px;
  position: relative;
  
  &::before {
    /* Если по какой-то причине нельзя задать фон прямо #canvasWrapper */
    /* div id="fon" удалить */
    content: "";
    position: absolute;
    /*  width: 100%; */
    /*  height: 100%; */
    inset: 0;
    background-color: #ffdcdc;
    background-image: url(https://cs4.pikabu.ru/post_img/2016/07/13/2/og_og_1468372209297155173.jpg);
    z-index: 0;
  }
}

.grid-field {
  --gap: 4px;
  /*   display: flex; */
  /*   flex-wrap: wrap; */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap); /* Промежутки между элементами */
  box-sizing: border-box;
  position: absolute;
  /*   left: 0; */
  /*   width: 100%; */
  /*   height: 100%; */
  inset: 0;
  overflow: hidden;
}

.grid-item {
  /*   position: relative; */
  /*   display: flex; */
  /*   justify-content: center; */
  /*   align-items: center; */
  /*   background-color: transparent; */
  font-size: 24px;
  /*   flex: 1 0 calc(25% - 10px); */
  /*   aspect-ratio: 1; */
  pointer-events: auto;
  z-index: 1;
  overflow: hidden;
  box-shadow: 0 0 0 calc(var(--gap) / 2 + 1px) white;
}

.item-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1;
  border: 1px solid #4b80a5;
  box-sizing: border-box;
  border-radius: 12px;
  box-shadow: 0 0 0 100vw white;
  /*   position: absolute; */
  /*   left: 0; */
  /*   right: 0; */
  /*   top: 0; */
  /*   bottom: 0; */
}

Закомментировала ненужное в вашем коде, удалите

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

Ankhena, да, у меня получился неадаптивный и негибкий колхоз с масками и блекджеком ))

Answer 1

[ANKU]

grid на flex поменяй, но суть та же

Comments

[Ankhena]

Попробуйте вернуть на место текст, как в примере

[ANKU]

Ankhena, какой текст? О чем речь?
Мой пример закрывает полностью запрос пользователя, без костылей.

[Ankhena]

ANKU, в оригинале в клетках числа.

[ANKU]

Ankhena, и в чем проблема вписать в мою верстку числа? Проблема автора была в стилях, как сделать макет без костылей. Уж думаю в каждый div.item вписать цифру не такая проблема

[bldeser]

ANKU, У меня почему то ваш пример не отображается, чистое белое поле

[Ankhena]

ANKU,

и в чем проблема вписать в мою верстку числа?

Так впишите и посмотрите где они в итоге будут.

[ANKU]

Ankhena, ну если вы не можете поправить простейшие правила css, то у вас проблемы.
Цифры расставил. Если вы заметили, то там стоял padding, чтобы деражать квадрат ровной формы
Можно задать аспект ратио или залепить через calc, там уже от задач автора вопроса

[ANKU]

bldeser, странно, вы не из интернет эксплорер смотрите?))) поддержка clip-path: border-box; 97%, у меня даже в сафари видно все ок, мб конечно картинка тяжелая в примере и не грузится. Добавил -webkit-clip-path
для старых сафари. проверьте

[Ankhena]

ANKU, ну конечно, тут подъехали доп обертки.
Теперь ок, но с ними есть варианты короче и изящнее, причём уже и у самого автора вопроса.

[ANKU]

bldeser,

Вариант решения: Скорей всего можно проще сделать....

Этот вариант вполне на 200%, я сначала думал о нем, но решил без создания доп дивов. Так что разницы в целом нет.

[Ankhena]

bldeser,

У меня почему то ваш пример не отображается, чистое белое поле

VPN нужен, чтобы картинка отображалась или замените фоновую картинку на другую.

[bldeser]

Ankhena, всё гуд, не обратил внимание на адрес фото

[bldeser]

ANKU,

странно, вы не из интернет эксплорер смотрите?)))

Нет, нет ) Все нормально, мне подсказали уже, у меня просто без впн фото не подгрузилось. Возьму тоже на вооружение.

Answer 2

[Wispik]

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

Comments

[bldeser]

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

[Wispik]

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

[bldeser]

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

[Wispik]

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

[bldeser]

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

[godsplan]

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

Answer 3

[Andrew Cossack]

.grid-field {
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    gap: 4px;
    padding-right: 4px;
    box-sizing: border-box;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: -1;
    background-color: #fff;
}

.grid-item {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    color: #e5e5e5;
    font-size: 24px;
    border-radius: 5px;
    flex: 1 0 calc(25% - 10px);
    aspect-ratio: 1;
    pointer-events: auto;
    border: 1px solid #bdbdbd;
    
}

Как вариант