Vertically centering elements using CSS Grid
https://codepen.io/malibiran/pen/OPJvRgy
On desktop screens, I am trying to center both
card-benefit-img-wrap +.card-benefit-view-jobs-wrap vertically as group (not individually), but I can't. Can someone please help?
8 Replies
you can't center it because you have the first row set to
auto and the 2nd set to 1frif you invert it, it will work: using
1fr auto
then, remove the height of
.card-benefit .card-benefit-img-wrap but change it to a minimum height
actually, give it 100% height
by giving it exactly 247px of height, you don't leave any wiggle room for anything: it's that size and that's it
changing to
min-height and then using height: 100% lets the container the image is in take all the height, but forces it to be at least 247px
and swapping from grid-template-rows: 1fr auto; to grid-template-rows: auto 1fr; makes it so the image has enough height and the button doesn't influence the available space for the vertical alignmentthese changes work ok even if there isn't enough content on the right column
@ἔρως Thanks for your answers!
It's now resolved ✅.
I just changed
grid-template-rows to auto and align-self: end; to .card-benefit-img-wrap - I didn't have to change .card-benefit-img-wrap height.
Thanks again for helping!you're welcome
i changed the height because it wasnt working for me, for some reason