Could you please take a look at this screenshot:
I am facing an issue with the grid layout. The first image in the grid is too short, which results in a big gap between the upper left and lower left pictures. Here is what it looks like currently:
Is there a way to have the grid rows adjust based on the height of the picture, similar to the layout in the first image? It also needs to be responsive. Additionally, how should I position the third picture so that it doesn't align with the first two? Can this be achieved using margins?
I have been struggling with this for a few days now, initially with flexbox and now with grid, but haven't been able to get the desired result. Here's the relevant CSS and HTML:
.fourth {
display: flex;
flex-direction: column;
align-items: center;
}
.collage2 {
display: grid;
width: 85%;
grid-auto-columns: repeat (2, 1fr);
}
.collage2 > img {
object-fit: cover;
width: 100%;
max-height: 100%;
}
.collage2 img:nth-child(3) {
grid-row: 1/2;
grid-column: 2;
}<section class="fourth">
<div class="collage2">
<img src="/images/photo-3.jpg" alt="Man drawing on whiteboard">
<img src="/images/photo-4.jpg" alt="Ableton address on a brick wall">
<img src="/images/photo-5.jpg" alt="Man and woman working at a music studio">
</div>