Gap in grid layout pushing child element outside

[anthonysalamin]

Hello,

i have a simple grid layout, inside of it are 3 children div. I would like to add a gap of 16px in between those children. However, adding a gab seems to push the children outside. Instead, I wish the children would shrink a bit so that there is space for the gap. I thought that’s what a gap was for ?

What am I doing wrong ?

here is a video

here is the read-only link

---

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

[maxioos]

Hello Anthony!
just add a custom property to Contact_Mosaic
(grid-template-columns) and value is “repeat(3, 1fr)”, that should do how you want it to behave.

[anthonysalamin]

hi @maxioos

thank you very much for getting back to me, your solution almost does the trick. I had to change to repeat(2, 1fr) so that it does’t push the children on the sides, however it still pushes them downwards (the images are overlapping the red section, they shouldn’t overlap they should remain contained within the green parent)

<style>
.contact__mosaic {
	grid-template-columns: repeat(2, 1fr);
}
</style>

[anthonysalamin]

I found the solution, I added the same setup but for rows !
Thank you so much for the hint @maxioos !

.contact__mosaic {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

[maxioos]

Awesome Anthony! Happy you made it happen.