Как я могу заставить эту сетку показывать только две строки и бесконечные столбцы? - PullRequest
0 голосов
/ 05 октября 2018

Это место, где пользователь будет публиковать картинки, и они будут отображаться, но это похоже на стиль слайдера на 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, потому что слайдер работает.Я просто не могу понять, как разместить их в два ряда.

...