Multiple columns using PHP Loop

app.css

.test{
   color: red;
   font-size: 16px;
}

.content-body{
   font-family: 'Siyam Rupali', 'SolaimanLipi', Vrinda, Arial, Helvetica, sans-serif;
   font-size: 16px;
   box-shadow: inset 1px -1px 1px #444,inset -1px 1px 1px #444; /* to make a border-like appearance */
   width: 100%; /* to get the full width */
   margin-bottom: 1em; /* just to make the thing more spacious */
}

.content-body h2,
.content-body p{
   margin: 0;
}

loop-3.css

.test{
   color: red;
   font-size: 150%;
}

.content-body{
   font-family: 'Siyam Rupali', 'SolaimanLipi', Vrinda, Arial, Helvetica, sans-serif;
   font-size: 80%;
   box-shadow:inset 1px -1px 1px #444,inset -1px 1px 1px #444; /* to make a border-like appearance */
   width: 32%; /* to get the column width */
   margin-bottom: 1em; /* just to make the thing more spacious */
   margin-right: 2%; /* to make the space among the columns */
   float: left;
}

.first-div{
   clear: both;
}

.third-div{
   float: right;
   margin: 0; /* <-------- here */
}

.content-body h2,
.content-body p{
   margin: 0;
}

loop-columns-2.php

<?php //start counting the div from 1 ?>
<?php $divCounter = 1; ?>
 
<?php for($counter = 0; $counter < 5; $counter++) { ?>
 
   <?php // Here we are making our class ?>
   <?php if( $divCounter % 2 == 0 ) { $class = ' second-div'; } else { $class = ' first-div'; } ?>
 
      <div class="content-body<?php echo $class; ?>">
         <div class="test"><?php echo 'div #' . $divCounter . ' & mod: ' . $divCounter % 2 . ' & class: ' . $class; //for testing ?></div>
         <h2>বিষয় শিরোনাম</h2>
         <p>অর্থহীন লেখা যার মাঝে আছে অনেক কিছু। হ্যাঁ, এই লেখার মাঝেই আছে অনেক কিছু। যদি তুমি মনে করো, এটা তোমার কাজে লাগবে, তাহলে তা লাগবে কাজে। নিজের ভাষায় লেখা দেখতে অভ্যস্ত হও। মনে রাখবে লেখা অর্থহীন হয়, যখন তুমি তাকে অর্থহীন মনে করো; আর লেখা অর্থবোধকতা তৈরি করে, যখন তুমি তাতে অর্থ ঢালো। যেকোনো লেখাই তোমার কাজে অর্থবোধকতা তৈরি করতে পারে, যদি তুমি সেখানে অর্থদ্যোতনা দেখতে পাও।</p>
      </div> <!-- .content-body -->
 
   <?php //update the div counter here just inside the loop ?>
   <?php $divCounter++; ?>
 
<?php } //endfor ?>

loop-columns-3.php

<?php //start counting the div from 1 ?>
<?php $divCounter = 1; ?>
 
<?php for($counter = 0; $counter < 7; $counter++) { ?>
 
   <?php // Here we are making our class ?>
   <?php if( $divCounter % 3 == 1 ) { $class1 = ' first-div'; } else { $class1 = ''; } ?>
   <?php if( $divCounter % 3 == 0 ) { $class2 = ' third-div'; } else { $class2 = ''; } ?>
 
   <div class="content-body<?php echo $class1; echo $class2; ?>">
      <div class="test"><?php echo 'div #' . $divCounter . ' & mod: ' . $divCounter % 3 . ' & class: ' . $class1 . $class2; //for testing ?></div>
      <h2>বিষয় শিরোনাম</h2>
      <p>অর্থহীন লেখা যার মাঝে আছে অনেক কিছু। হ্যাঁ, এই লেখার মাঝেই আছে অনেক কিছু। যদি তুমি মনে করো, এটা তোমার কাজে লাগবে, তাহলে তা লাগবে কাজে। নিজের ভাষায় লেখা দেখতে অভ্যস্ত হও।</p>
   </div> <!-- .content-body -->
 
   <?php //update the div counter here just inside the loop ?>
   <?php $divCounter++; ?>
 
<?php } //endfor ?>

loop-columns.php

<?php //start counting the div from 1 ?>
<?php $divCounter = 1; ?>
 
<?php for($counter = 0; $counter < 5; $counter++) { ?>
 
   <div class="content-body <?php echo $class; ?>">
      <div class="test"><?php echo 'div #' . $divCounter . ' & mod: ' . $divCounter % 2; //for testing ?></div>
      <h2>বিষয় শিরোনাম</h2>
      <p>অর্থহীন লেখা যার মাঝে আছে অনেক কিছু। হ্যাঁ, এই লেখার মাঝেই আছে অনেক কিছু। যদি তুমি মনে করো, এটা তোমার কাজে লাগবে, তাহলে তা লাগবে কাজে। নিজের ভাষায় লেখা দেখতে অভ্যস্ত হও। মনে রাখবে লেখা অর্থহীন হয়, যখন তুমি তাকে অর্থহীন মনে করো; আর লেখা অর্থবোধকতা তৈরি করে, যখন তুমি তাতে অর্থ ঢালো। যেকোনো লেখাই তোমার কাজে অর্থবোধকতা তৈরি করতে পারে, যদি তুমি সেখানে অর্থদ্যোতনা দেখতে পাও।</p>
   </div> <!-- .content-body -->
 
   <?php //update the div counter here just inside the loop ?>
   <?php $divCounter++; ?>
 
<?php } //endfor ?>

loop.css

.content-body{
   width: 48%; /* to get the column width */
   float: left;
}

.second-div{
   float: right;
}

.first-div{
   clear: both;
}

loop.php

<?php for($counter = 0; $counter < 5; $counter++) { ?>
   <div class="content-body">
      <div class="test"></div>
      <h2>বিষয় শিরোনাম</h2>
      <p>অর্থহীন লেখা যার মাঝে আছে অনেক কিছু। হ্যাঁ, এই লেখার মাঝেই আছে অনেক কিছু। যদি তুমি মনে করো, এটা তোমার কাজে লাগবে, তাহলে তা লাগবে কাজে। নিজের ভাষায় লেখা দেখতে অভ্যস্ত হও। মনে রাখবে লেখা অর্থহীন হয়, যখন তুমি তাকে অর্থহীন মনে করো; আর লেখা অর্থবোধকতা তৈরি করে, যখন তুমি তাতে অর্থ ঢালো। যেকোনো লেখাই তোমার কাজে অর্থবোধকতা তৈরি করতে পারে, যদি তুমি সেখানে অর্থদ্যোতনা দেখতে পাও।</p>
   </div> <!-- .content-body -->
<?php } //endfor ?>