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

[adefesoq]

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:

https://codepen.io/Que0/pen/MWKNrgK

[Erik_J]

@adefesoq

I got stuck on this grid tutorial

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

[PaulOB]

@adefesoq

s my grid-gap won’t render on its container on both Chrome and Firefox.

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.

[adefesoq]

@Erik_J

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

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!

[PaulOB]

@adefesoq

You can recommend for me a good learning material for CSS grid and I will check it out, thanks!

This is a good reference.

A Complete Guide to CSS Grid | CSS-Tricks

[adefesoq]

@PaulOB

This is a good reference.

Thanks

[adefesoq]

@PaulOB

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.

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.

[PaulOB]

@adefesoq

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

[adefesoq]

@PaulOB

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

Thank you