Это место, где пользователь будет публиковать картинки, и они будут отображаться, но это похоже на стиль слайдера на Zillow.com.Я получил это два шоу до 9 делений, а затем оттуда, он будет создавать больше строк.
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: 200px;
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="detailed-gallery-outer">
<div class="detailed-gallery-inner">
<div class="grid-container">
<div class="item1"><img src="images/office1.jpg" alt="office1" width="250" height="340"/></div>
<div class="item2"><img src="images/office2.jpg" alt="office2" width="250" height="165"/></div>
<div class="item3"><img src="images/office3.jpg" alt="office3" width="250" height="165"/></div>
<div class="item4"><img src="images/office4.jpg" alt="office4" width="250" height="165"/></div>
<div class="item5"><img src="images/office5.jpg" alt="office5" width="250" height="165"/></div>
<div class="item6"><img src="images/office6.jpg" alt="office6" width="250" height="165"/></div>
<div class="item7"><img src="images/office7.jpg" alt="office7" width="250" height="165"/></div>
<div class="item8"><img src="images/office3.jpg" alt="office8" width="250" height="165"/></div>
<div class="item9"><img src="images/office4.jpg" alt="office9" width="250" height="165"/></div>
<div class="item10"><img src="images/office6.jpg" alt="office8" width="250" height="165"/></div>
<div class="item11"><img src="images/office5.jpg" alt="office9" width="250" height="165"/></div>
</div>
</div>
</div>
<div class="arrow-right">
<div class="arrow-right-small">
</div>
</div>
</div>
Я не собираюсь публиковать JavaScript и остальные трески на CSS, потому что слайдер работает.Я просто не могу понять, как разместить их в два ряда.