php - CSS と PHP を使用して DIV グリッドを作成する際のロジック エラー

Question

DIV を使用してグリッドを作成する際のロジックがわかりません。3 列 ( $count変数) の場合、それらの列をいくつでもボックスで埋めます。( $totalBoxes )

以下は、私が達成したいことの例です。

テーブルの繰り返し領域でロジックを使用しようとしましたが、それが正しく機能しているかどうかわかりません。私のコードのほとんどは、このスクリーンショットのようなものを吐き出します:

誰かが私の論理が間違っている場所を指摘できますか?

CSS

<style type="text/css">
#container {
background-color: #FFC;
height: 750px;
width: 900px;
padding: 5px;
}
#container #column {
background-color: #FC6;
width: 200px;
padding: 5px;
float: left;
margin: 5px;
}
#container #column #box {
background-color: #9C3;
height: 150px;
width: 150px;
margin: 5px;
}
</style>

PHP

<div id="container">
  <?php 
$count = 3;
$totalBoxes = 8;
?>
  <?php for ($i = 1; $i <= $totalBoxes; $i++) {

if ($i % $count == 1){ ?>
<div id="column"> Column <?php echo $i; ?>
<?php } else { ?>
<div id="box"> <?php echo $i; ?> </div>
</div>
<?php } } ?>
</div>