jquery-PHPを使用してSQLからフェッチする3つのアイテムごとに新しいdivクラス行を作成します

ギャラリーを作成しようとしています。3つの画像ごとに新しいdivを作成してやり直す必要があります（このhtmlをphp-sqlに変換しようとしています）

このphpコードでそれを試しています

 <?php
  //get images from database
  $query = $con->query("SELECT * FROM images ORDER BY id");

   if($query->num_rows > 0){
    while($row = $query->fetch_assoc()){
    $imagethumb = 'images/thumb/'.$row["file_name"];
    $imagefront = 'images/'.$row["file_name"];

    $i = 0;

    if($i++ % 3 == 0){
    ?>
    <div class=" bd-layoutcontainer bd-columns bd-no-margins">
       <div class="bd-container-inner">
          <div class="container-fluid">
              <div class="row">                             
                   <div class="bd-columnwrapper-136 <?php  
                       list($width, $height) = getimagesize($imagethumb);                                
                       if($width > 298){
                          echo 'col-sm-6';
                       }else{
                          echo 'col-sm-3';
                     }
                   ?>">
                   <?php echo '<div class="bd-layoutcolumn-136 bd-column">
                               <div class="bd-vertical-align-wrapper">
                               <div class="bd-hoverbox-6 bd-effect-fade">
                               <div class="bd-slidesWrapper">' ?>
                        <a href="<?php echo $imagethumb; ?>" data-fancybox="group" data-caption="<?php echo $row["title"]; ?>" >
                         <img src="<?php echo $imagefront; ?>" alt="" />
                        </a>
                  <?php echo '
                              </div>
                              </div> 
                              </div>
                              </div>'
                  ?> 
                  </div>
            </div>
      </div>
     </div>
   <?php
      }
      }
      } 
?>
 Copy code

ifステートメント$i％3 == 0を使用して新しいdivを作成していますが、写真のように3つの画像ではなく、すべての画像を1つずつ取得しています。 > これは私が得るものです

他に何をすべきですか？

作成するには3imgごとに必要です

 <div class=" bd-layoutcontainer bd-columns bd-no-margins">
       ..............
     </div>
 Copy code

そしてdivが3倍になることはありません私はちょうど1つのdivを取り戻しました