How do I solve this background conundrum , I'm lost. Thank you for any help
I have a grid section that is 100vh
2 grid items inside, an H1 and a P.
I need these centered both vertically and horizontally inside, as they are currently (using place-items: center center;)
BUT I also need their background colors to be full height and width of their own grid cell, which is the case when place-items isn't used, but when I centre, the background shrinks to the size of the element.
How do I achieve this in a simple and non hacky manner, that is also responsive. I have found padding and margin to be unhelpful.
I've been stuck on this for 2 days now.
Thank you kindly for your help
https://codepen.io/Slenkhar/pen/xxBKzdB
9 Replies
I thought I had resolved this yesterday. Boy I was wrong.
thank you kindly. if you have the capacity timewise to explain the logic behind this, it'd be grand
i just used grid to place the h1 and p in the center, your existing grid is just used to make two columns
so you can use grid without declaring a grid-template-column value? I thought grid was only a container. Would this basically be the modern equivalent of positioning absolute elements?
yes grid-template-columns is optional just like the other grid properties. Yes you could say that grid is a lot easier to use for responsivenes
That is very enlightnening, and not a concept I'd come across in freecodecamp yet.
THANK YOU SO MUCH for solving in 5 minutes what I have been stuck on for over 10 hours, you cannot imagine how glad I am right now !!! and thank you so much for taking the time to explain the concept.
Now let's go get stuck on the next section 😅 .
good luck 
thank you so much