Блог

Я пытаюсь динамически создавать сетку изображений следующим образом:

Что я получаю, так это:

Это структура, которая у меня есть:

 <section class="categories-grid">
  <div class="container-fluid">
    <div class="row frontpage-images">

      <?php $categories = Roller::getBlock('Article/Category_Navi')->getTree() ?>

      <?php foreach($categories as $i=>$category): ?>
        <?php if($i == 0): ?>
          <div class="col-8">
            <a href="<?= $category['category_url'] ?>">
              <div class="image">
                <div class="caption"><?= $category['name'] ?></div> <!--  Category title -->
                <img src="<?= $category['picture_url'] ?>" class="img-responsive img-fluid"/>
              </div>
            </a>
          </div> <!--  col-8 end -->
        <?php endif ?>
        <?php if($i == 1): ?>
          <div class="col-4">
            <a href="<?= $category['category_url'] ?>">
              <div class="image">
                  <div class="caption"><?= $category['name'] ?></div> <!--  Category title -->
                  <img src="<?= $category['picture_url'] ?>" class="img-responsive img-fluid"/>
              </div>
            </a>
        <?php endif ?>
        <?php if($i == 2): ?>
            <a href="<?= $category['category_url'] ?>" id="move-me-into-second">
              <div class="image" >
                <div class="caption"><?= $category['name'] ?></div> <!--  Category title -->
                <img src="<?= $category['picture_url'] ?>" class="img-responsive img-fluid"/>
              </div>
            </a>
            <script>
              $('#move-me-into-second').appendTo('.col-4');
            </script>
          </div> <!--  col-4 end -->
        <?php endif ?>
        <?php if($i > 2): ?>
          <div class="col-6">
            <a href="<?= $category['category_url'] ?>">
              <div class="image">
                <div class="caption"><?= $category['name'] ?></div> <!--  Category title -->
                <img src="<?= $category['picture_url'] ?>" class="img-responsive img-fluid"/>                
              </div>
            </a>
          </div> <!--  col-6 end -->
        <?php endif ?>
      <?php endforeach; ?>
    </div>
  </div>
</section>
  

И это css:

 .frontpage-images img{
    width: 100%;
    height: auto;
    padding-top: 15px;
}
  

Что я делаю не так? Почему я не могу сделать так, чтобы изображения внутри col-4 были одинаковой высоты и помещались по col-8 высоте? Любая помощь очень ценится.