Группировка блоков разный высоты в один контейнер

249

13 апреля 2018, 13:24

Как на bootstrap можно реализовать такой набор блоков? Запасной вариант для меня это js либа masonry. Каким решением вы б воспользовались?

Answer 1

Возможно так.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> 
 
<div class="container mb-2"> 
  <div class="row pt-2"> 
    <div class="col"> 
 
      <!-- 1 card --> 
      <div class="card mb-2"> 
        <img class="img-fluid" src="https://dummyimage.com/600x500/000/fff.jpg" alt=""> 
      </div> 
      <div class="row"> 
        <div class="col"> 
 
          <!-- 2 card --> 
          <div class="card"> 
            <img class="img-fluid" src="https://dummyimage.com/600x800/000/fff.jpg" alt=""> 
          </div> 
        </div> 
        <div class="col  pl-0"> 
 
          <!-- 3 card --> 
          <div class="card"> 
            <img class="img-fluid" src="https://dummyimage.com/600x800/000/fff.jpg" alt=""> 
          </div> 
        </div> 
      </div> 
    </div> 
 
    <div class="col pl-0"> 
      <div class="row mb-2"> 
        <div class="col"> 
 
          <!-- 4 card --> 
          <div class="card"> 
            <img class="img-fluid" src="https://dummyimage.com/600x800/000/fff.jpg" alt=""> 
          </div> 
        </div> 
        <div class="col pl-0"> 
 
          <!-- 5 card --> 
          <div class="card"> 
            <img class="img-fluid" src="https://dummyimage.com/600x800/000/fff.jpg" alt=""> 
          </div> 
        </div> 
      </div> 
 
      <!-- 6 card --> 
      <div class="card"> 
        <img class="img-fluid" src="https://dummyimage.com/600x500/000/fff.jpg" alt=""> 
      </div> 
    </div> 
  </div> 
</div>