The latest articles on DEV Community by Steffen Moreano Guerra (@moreano). https://dev.to/moreano https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2198297%2Fef20ffff-09d4-4e20-bfa3-754ca318d667.png https://dev.to/moreano en Steffen Moreano Guerra Fri, 11 Oct 2024 12:02:08 +0000 https://dev.to/moreano/vertical-alignment-of-3-grid-areas-in-the-left-column-with-1-grid-area-in-the-right-column-56go https://dev.to/moreano/vertical-alignment-of-3-grid-areas-in-the-left-column-with-1-grid-area-in-the-right-column-56go <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F72av1omrka2ifdzvmzs8.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F72av1omrka2ifdzvmzs8.png" alt="Image description" width="800" height="367"></a></p> <p>Hello,<br> I've got a grid-template defined as</p> <p>grid-template: 1fr auto 1fr / 1fr 1fr;<br> grid-template-areas:<br> "breadcrumb image"<br> "title image"<br> "text image";</p> <p>I want to have the 3 areas vertical aligned center on the left hand side of the image (see screenshot).</p> <p>Does anyone's got an idea on how to fix this using CSS?</p> <p>Thx in advance<br> Steffen</p>