Image Gallery Multi Objects in one Coloumn

Question

Hello I've a question with the "for" attribute. I want to make a image gallery there I check all images from one folder and displaying it. But I want to make so maybe 3 pictures gets in to one coloumn then makes more coloumns for the other pictures.

<div class="row">
 <div class="column">

        <?php
        $files = glob("images/*.*");
        for ($i=0; $i<count($files); $i++)
         {
           $image = $files[$i];
           $supported_file = array(
                   'gif',
                   'jpg',
                   'jpeg',
                   'png'
            );

            $ext = strtolower(pathinfo($image, PATHINFO_EXTENSION));
            if (in_array($ext, $supported_file)) {

                    echo "<img src=".$image." style=width:100% />";
               }
             }

           ?>
  </div>

Answer 1

You should not be putting multiple items in the same column, instead, have each item in a column and use rows.

Try this:

<?php 
$files = glob("images/*.{gif,jpg,jpeg,png}", GLOB_BRACE);

foreach ($files as $key => $file) {
    if ($key % 3 == 0) { // change 3 to how many items between rows
        if ($key != 0) { echo '</div>'.PHP_EOL; }
        echo '<div class="row">'.PHP_EOL;
    }
    echo '<div class="column"><img src="'.$file.'" style=width:100% /></div>'.PHP_EOL;
}
?>
</div>

https://3v4l.org/Y3bXo

Result:

<div class="row">
  <div class="column"><img src="foo.jpg" style=width:100% /></div>
  <div class="column"><img src="foo1.png" style=width:100% /></div>
  <div class="column"><img src="foo2.png" style=width:100% /></div>
</div>
<div class="row">
  <div class="column"><img src="foo3.png" style=width:100% /></div>
  <div class="column"><img src="foo4.png" style=width:100% /></div>
  <div class="column"><img src="foo5.png" style=width:100% /></div>
</div>
<div class="row">
  <div class="column"><img src="foo6.png" style=width:100% /></div>
  <div class="column"><img src="foo7.png" style=width:100% /></div>
  <div class="column"><img src="foo8.png" style=width:100% /></div>
</div>
<div class="row">
  <div class="column"><img src="foo9.png" style=width:100% /></div>
  <div class="column"><img src="foo10.png" style=width:100% /></div>
</div>