Grid gap doesn't seem to be working with my code

Hello everyone, I’m new to CSS grid and I got stuck on this grid tutorial as my grid-gap won’t render on its container on both Chrome and Firefox.

NB: I use gap property as “grid-gap” is obsolete. . Codepen link:

I’m curious, what grid tutorial are you referring?

The gap is clearly there in both browsers. Just adjust it using the developer tools and you will see the space between boxes getting bigger and smaller. It is mostly redundant though because you have 20px padding on the box giving a 40px gap between to start with and then you use place-items: centre which centre the blocks in the available space thus adjusting the space between all items once again depending on the available width and the max-width of each item.

If you remove place-items:center and the padding:20px you can see your gap working on its own. When used in conjunction with the other properties you are using it becomes mostly redundant but does still have an effect.

Remember that grid (and flex) have properties that interact in various ways and indeed some properties have no effect when other layout properties are active.

1 Like

I’m refering to a video on CSS grid from YouTube… I’m just trying to learn how CSS grid is practically used for layout on web pages to solidify my knowledge of it… You can recommend for me a good learning material for CSS grid and I will check it out, thanks!

1 Like

This is a good reference.

1 Like


1 Like

Thanks, Yeah I could see the gap through the developer tools but even after removing “place-items” and “padding” the gap isn’t still visible without using developer tools.

Yes the gap is still there just add a background-color to .box and you will see it :slight_smile:


Thank you

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.