Vertically centering an image in a grid template table cell

Question

I am trying to make a card where it consists of a header, image, content, and cta. On mobile view, I split the card into two columns: left with header, content, and cta, and right with the image.

grid-template-columns: 2fr 1fr;
grid-template-areas: 
    "header image"
    "content image"
    "cta image";

And on regular view, the card is one column in the order header, image, content, and cta.

I am having trouble vertically aligning the image on the mobile view. It just remains at the top. On css-tricks, applying align-self: center; to .c-productCard__image seems to be the right choice to make it vertically align, but it did not move. I'm not really familiar with using grid template, so any advice would help.

codepen

Answer 1

You can use display: flex on the image container .c-productCard__image

&__image {
  display: flex;
  align-items: center;
  height: 100%;
}