CSS Grid Items Alignment

[iakovosvo]

I have been playing with css-grid for about a week now and I am struggling to understand why the alignment of my grid’s items get messed up when I change a div to h1 and p. This is an example taken from Rachel Andrew’s Grid by Example 5: Line-based placement spanning cells. Can someone explain this behaviour and how can I fix it?

https://codepen.io/slowjac/pen/mvvQyv?fbclid=IwAR2xCtwQsG3tfi1X715ATWUpfDMCBjwkXDBfkQfUSQRHbeK8d1sJJ9-SoOY

[Paulie_D]

Simpley because some of the elements you have used have default margins.

Employ a standard reset and all is good.

https://codepen.io/Paulie-D/pen/zebBKE?fbclid=IwAR2xCtwQsG3tfi1X715ATWUpfDMCBjwkXDBfkQfUSQRHbeK8d1sJJ9-SoOY

[iakovosvo]

Thank you :)

[Author]

Posts