Name: Vertical alignment of 3 grid-areas in the left column with 1 grid-area in the right column
Rating: 3.9 (3501 reviews)
Author: moreano

Vertical alignment of 3 grid-areas in the left column with 1 grid-area in the right column

Steffen Moreano Guerra - Oct 11 -

- Dev Community

Hello,
I've got a grid-template defined as

grid-template: 1fr auto 1fr / 1fr 1fr;
grid-template-areas:
"breadcrumb image"
"title image"
"text image";

I want to have the 3 areas vertical aligned center on the left hand side of the image (see screenshot).

Does anyone's got an idea on how to fix this using CSS?

Thx in advance
Steffen