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
Slenkhar
Slenkhar•11mo ago
I thought I had resolved this yesterday. Boy I was wrong.
Slenkhar
Slenkhar•11mo ago
thank you kindly. if you have the capacity timewise to explain the logic behind this, it'd be grand
Mannix
Mannix•11mo ago
i just used grid to place the h1 and p in the center, your existing grid is just used to make two columns
Slenkhar
Slenkhar•11mo ago
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?
Mannix
Mannix•11mo ago
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
Slenkhar
Slenkhar•11mo ago
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 😅 .
Mannix
Mannix•11mo ago
good luck thumbup
Slenkhar
Slenkhar•11mo ago
thank you so much
Want results from more Discord servers?
Add your server