Merhaba Arkadaşlar,
Takıldığım bir konuda fikrinizi almak istedim.
Aşağıdaki şekilde bir html yapım var. Burada içerik kutu halinde listeleniyor. Kutu içerisinde görsel ve üzerinde başlık mevcut.
Ancak görsel boyutları birbirinden farklı olabildiğinden sayfada düzensizlik oluşturuyor. Bu nedenle pinterest tarzında masonry yapısını denedim ancak olmadı maalesef. Bootstrap card-columns denedim bu da olmadı yada ben beceremedim
Konuyla ilgili olarak nasıl bir işlem sağlamalıyım bilgisi olan arkadaşlar yardımcı olursa sevinirim.
Herkese iyi çalışmalar.

<div class="col-lg-9">
   <div class="ts-heading-item">
      <h2 class="ts-title">
         <span>Technology</span>
      </h2>
   </div>
   <div class="row mb-10">
      <div class="col-lg-4">
         <div class="ts-overlay-style">
            <div class="item">
               <div class="ts-post-thumb">
                  <a class="post-cat ts-blue-bg" href="#">Technology</a>
                  <a href="#">
                  <img class="img-fluid" src="images/news/tech/tech4.jpg" alt="">
                  </a>
               </div>
               <div class="overlay-post-content">
                  <div class="post-content">
                     <h3 class="post-title md">
                        <a href="#">Tourism in Dubai is booming international tourist most visited place</a>
                     </h3>
                     <ul class="post-meta-info">
                        <li class="author">
                           <a href="#">
                           <img src="images/avater/author1.jpg" alt=""> Donald Ramos
                           </a>
                        </li>
                        <li>
                           <i class="fa fa-clock-o"></i>
                           March 21, 2019
                        </li>
                        <li class="active">
                           <i class="icon-fire"></i>
                           3,005
                        </li>
                     </ul>
                  </div>
               </div>
            </div>
            <!-- end item-->
         </div>
         <!-- ts overlay end-->
      </div>
      <!-- col end--><!-- col end-->
      <div class="col-lg-4">
         <div class="ts-overlay-style">
            <div class="item">
               <div class="ts-post-thumb">
                  <a class="post-cat ts-blue-bg" href="#">Technology</a>
                  <a href="#">
                  <img class="img-fluid" src="images/news/tech/tech4.jpg" alt="">
                  </a>
               </div>
               <div class="overlay-post-content">
                  <div class="post-content">
                     <h3 class="post-title md">
                        <a href="#">Tourism in Dubai is booming international tourist most visited place</a>
                     </h3>
                     <ul class="post-meta-info">
                        <li class="author">
                           <a href="#">
                           <img src="images/avater/author1.jpg" alt=""> Donald Ramos
                           </a>
                        </li>
                        <li>
                           <i class="fa fa-clock-o"></i>
                           March 21, 2019
                        </li>
                        <li class="active">
                           <i class="icon-fire"></i>
                           3,005
                        </li>
                     </ul>
                  </div>
               </div>
            </div>
            <!-- end item-->
         </div>
         <!-- ts overlay end-->
      </div>
      <!-- col end--><!-- col end-->
      <div class="col-lg-4">
         <div class="ts-overlay-style">
            <div class="item">
               <div class="ts-post-thumb">
                  <a class="post-cat ts-blue-bg" href="#">Technology</a>
                  <a href="#">
                  <img class="img-fluid" src="images/news/tech/tech4.jpg" alt="">
                  </a>
               </div>
               <div class="overlay-post-content">
                  <div class="post-content">
                     <h3 class="post-title md">
                        <a href="#">Tourism in Dubai is booming international tourist most visited place</a>
                     </h3>
                     <ul class="post-meta-info">
                        <li class="author">
                           <a href="#">
                           <img src="images/avater/author1.jpg" alt=""> Donald Ramos
                           </a>
                        </li>
                        <li>
                           <i class="fa fa-clock-o"></i>
                           March 21, 2019
                        </li>
                        <li class="active">
                           <i class="icon-fire"></i>
                           3,005
                        </li>
                     </ul>
                  </div>
               </div>
            </div>
            <!-- end item-->
         </div>
         <!-- ts overlay end-->
      </div>
      <!-- col end--><!-- col end-->
      <div class="col-lg-4">
         <div class="ts-overlay-style">
            <div class="item">
               <div class="ts-post-thumb">
                  <a class="post-cat ts-blue-bg" href="#">Technology</a>
                  <a href="#">
                  <img class="img-fluid" src="images/news/tech/tech4.jpg" alt="">
                  </a>
               </div>
               <div class="overlay-post-content">
                  <div class="post-content">
                     <h3 class="post-title md">
                        <a href="#">Tourism in Dubai is booming international tourist most visited place</a>
                     </h3>
                     <ul class="post-meta-info">
                        <li class="author">
                           <a href="#">
                           <img src="images/avater/author1.jpg" alt=""> Donald Ramos
                           </a>
                        </li>
                        <li>
                           <i class="fa fa-clock-o"></i>
                           March 21, 2019
                        </li>
                        <li class="active">
                           <i class="icon-fire"></i>
                           3,005
                        </li>
                     </ul>
                  </div>
               </div>
            </div>
            <!-- end item-->
         </div>
         <!-- ts overlay end-->
      </div>
      <!-- col end--><!-- col end-->
      <div class="col-lg-4">
         <div class="ts-overlay-style">
            <div class="item">
               <div class="ts-post-thumb">
                  <a class="post-cat ts-blue-bg" href="#">Technology</a>
                  <a href="#">
                  <img class="img-fluid" src="images/news/tech/tech4.jpg" alt="">
                  </a>
               </div>
               <div class="overlay-post-content">
                  <div class="post-content">
                     <h3 class="post-title md">
                        <a href="#">Tourism in Dubai is booming international tourist most visited place</a>
                     </h3>
                     <ul class="post-meta-info">
                        <li class="author">
                           <a href="#">
                           <img src="images/avater/author1.jpg" alt=""> Donald Ramos
                           </a>
                        </li>
                        <li>
                           <i class="fa fa-clock-o"></i>
                           March 21, 2019
                        </li>
                        <li class="active">
                           <i class="icon-fire"></i>
                           3,005
                        </li>
                     </ul>
                  </div>
               </div>
            </div>
            <!-- end item-->
         </div>
         <!-- ts overlay end-->
      </div>
      <!-- col end-->
   </div>
   <!-- row end-->
</div>