使用PHP创建图像网格

I have a problem about PHP coding. I manage to display the first 12 image nicely on the image grid but after that, the picture seems to be out of place.

<?php
$i = 0;
while ($row = mysqli_fetch_array($result)) {
    if ($i % 3 == 0) {
        echo "<div class='w3-quarter'>";
    }
    echo "<img src='images/{$row['image']}' onclick=onClick(this) style='width:100%'>";
    if ($i % 3 == 2) {
        echo"</div>";
    }
    $i++;
}
?>

I want the output to look like this 2

and the css i using is w3-quarter from w3.css