does image size matter when creating grid galleries? right now I dont see uniformness
<div class="container">
<div class="grid">
<div class="image-block small-image">
<img src="img" alt="Placeholder Image">
</div>
<div class="image-block long-image">
<img src="ing" alt="Placeholder Image">
</div>
<div class="image-block small-image">
<img src="img" alt="Placeholder Image">
</div>
<div class="image-block tall-image">
<img src="https://res.cloudinary.com/gofjords-com/images/c_scale,w_448,h_252,dpr_2/f_auto,q_auto:eco/v1698935484/Destinations/Flam/Stegastein/Stegastein-winter-Aurlandsfjord-Flam-Sunrise/Stegastein-winter-Aurlandsfjord-Flam-Sunrise.jpg?_i=AA" alt="Placeholder Image">
</div>
<div class="image-block medium-image">
<img src="https://res.cloudinary.com/gofjords-com/images/c_scale,w_448,h_252,dpr_2/f_auto,q_auto:eco/v1698935484/Destinations/Flam/Stegastein/Stegastein-winter-Aurlandsfjord-Flam-Sunrise/Stegastein-winter-Aurlandsfjord-Flam-Sunrise.jpg?_i=AA" alt="Placeholder Image">
</div>
<div class="image-block medium-image">
<img src="https://res.cloudinary.com/gofjords-com/images/c_scale,w_448,h_252,dpr_2/f_auto,q_auto:eco/v1698935484/Destinations/Flam/Stegastein/Stegastein-winter-Aurlandsfjord-Flam-Sunrise/Stegastein-winter-Aurlandsfjord-Flam-Sunrise.jpg?_i=AA" alt="Placeholder Image">
</div>
<div class="image-block tall-image second-tall-image">
<img src="https://res.cloudinary.com/gofjords-com/images/c_scale,w_448,h_252,dpr_2/f_auto,q_auto:eco/v1698935484/Destinations/Flam/Stegastein/Stegastein-winter-Aurlandsfjord-Flam-Sunrise/Stegastein-winter-Aurlandsfjord-Flam-Sunrise.jpg?_i=AA" alt="Placeholder Image">
</div>
</div>
</div>
<div class="container">
<div class="grid">
<div class="image-block small-image">
<img src="img" alt="Placeholder Image">
</div>
<div class="image-block long-image">
<img src="ing" alt="Placeholder Image">
</div>
<div class="image-block small-image">
<img src="img" alt="Placeholder Image">
</div>
<div class="image-block tall-image">
<img src="https://res.cloudinary.com/gofjords-com/images/c_scale,w_448,h_252,dpr_2/f_auto,q_auto:eco/v1698935484/Destinations/Flam/Stegastein/Stegastein-winter-Aurlandsfjord-Flam-Sunrise/Stegastein-winter-Aurlandsfjord-Flam-Sunrise.jpg?_i=AA" alt="Placeholder Image">
</div>
<div class="image-block medium-image">
<img src="https://res.cloudinary.com/gofjords-com/images/c_scale,w_448,h_252,dpr_2/f_auto,q_auto:eco/v1698935484/Destinations/Flam/Stegastein/Stegastein-winter-Aurlandsfjord-Flam-Sunrise/Stegastein-winter-Aurlandsfjord-Flam-Sunrise.jpg?_i=AA" alt="Placeholder Image">
</div>
<div class="image-block medium-image">
<img src="https://res.cloudinary.com/gofjords-com/images/c_scale,w_448,h_252,dpr_2/f_auto,q_auto:eco/v1698935484/Destinations/Flam/Stegastein/Stegastein-winter-Aurlandsfjord-Flam-Sunrise/Stegastein-winter-Aurlandsfjord-Flam-Sunrise.jpg?_i=AA" alt="Placeholder Image">
</div>
<div class="image-block tall-image second-tall-image">
<img src="https://res.cloudinary.com/gofjords-com/images/c_scale,w_448,h_252,dpr_2/f_auto,q_auto:eco/v1698935484/Destinations/Flam/Stegastein/Stegastein-winter-Aurlandsfjord-Flam-Sunrise/Stegastein-winter-Aurlandsfjord-Flam-Sunrise.jpg?_i=AA" alt="Placeholder Image">
</div>
</div>
</div>
3 Replies
.grid{
display: grid;
gap: 16px;
grid-template-columns: repeat(4,1fr);
grid-template-rows: 250px 75px 375px;
}
.small-image{
grid-row: span 1;
}
.long-image{
grid-column:span 2;
grid-row: span 2;
}
.tall-image{
grid-row: span 2;
}
.second-tall-image{
grid-column-start: 4;
grid-column-end: 5;
grid-row-start: 2;
grid-row-end: 4;
}
.medium-image{
grid-row: span 1;
}
.grid{
display: grid;
gap: 16px;
grid-template-columns: repeat(4,1fr);
grid-template-rows: 250px 75px 375px;
}
.small-image{
grid-row: span 1;
}
.long-image{
grid-column:span 2;
grid-row: span 2;
}
.tall-image{
grid-row: span 2;
}
.second-tall-image{
grid-column-start: 4;
grid-column-end: 5;
grid-row-start: 2;
grid-row-end: 4;
}
.medium-image{
grid-row: span 1;
}
You need to tell the images that they need to occupy the full width and height of the grid cells.
thank you 🙂