My goal is to display multiple images in two rows. The alignment works well for up to 9 images, but beyond that, the additional images appear on a third row instead of staying within the two rows. I want to ensure they are contained within 2 rows only. How can I achieve this? D: I am aiming for a gallery layout similar to websites like zillow.com and hotels.com where users can upload their images. It's possible that not all uploads will have as many images, but I don't want to set a maximum limit.
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: 165px;
grid-gap: 10px;
}
.grid-container>div {
text-align: center;
font-size: 30px;
}
.item1 {
grid-row: 1 / 3;
}
.detailed-gallery-outer {
overflow: hidden;
width: 100%;
}
.detailed-gallery-inner {
float: left;
position: relative;
}
.detailed-gallery-tmb {
float: left;
margin: 0 10px 0 0;
}
.detailed-gallery {
display: flex;
justify-content: space-between;
padding: 0;
position: relative;
width: 1140px;
margin: 0 auto;
}<div class="detailed-gallery">
<div class="arrow-left">
<div class="arrow-left-small">
</div>
</div>
<div class="container">
<div class="detailed-gallery-outer">
<div class="detailed-gallery-inner">
<div class="grid-container">
<div class="item1"><img src="https://www.w3schools.com/howto/img_forest.jpg" alt="office1" width="250" height="340" /></div>
<div class="item2"><img src="https://www.w3schools.com/howto/img_forest.jpg" alt="office2" width="250" height="165" /></div>
<div class="item3"><img src="https://www.w3schools.com/howto/img_forest.jpg" alt="office3" width="250" height="165" /></div>
<div class="item4"><img src="https://www.w3schools.com/howto/img_forest.jpg" alt="office4" width="250" height="165" /></div>
<div class="item5"><img src="https://www.w3schools.com/howto/img_forest.jpg" alt="office5" width="250" height="165" /></div>
<div class="item6"><img src="https://www.w3schools.com/howto/img_forest.jpg" alt="office6" width="250" height="165" /></div>
<div class="item7"><img src="https://www.w3schools.com/howto/img_forest.jpg" alt="office7" width="250" height="165" /></div>
<div class="item8"><img src="https://www.w3schools.com/howto/img_forest.jpg" alt="office8" width="250" height="165" /></div>
<div class="item9"><img src="https://www.w3schools.com/howto/img_forest.jpg" alt="office9" width="250" height="165" /></div>
</div>
</div>
</div>
</div>
<div class="arrow-right">
<div class="arrow-right-small">
</div>
</div>
</div>I could share the JavaScript code too, but I don't believe that is the issue.