これによって、子要素が親要素からはみ出すことなく、親要素いっぱいに綺麗に配置されます。各子要素の間のマージンは「2%」としており、そこから逆算して子要素の横幅を指定しています。指定して、その中に子要素のカラム部分を設置していきます。このとき、子要素のクラス名「grid-X」の「X」の値が合計で「12」になるように記述します。一例としては以下のようになります。class="grid-5">5</div></div>子要素の「grid-X」の「X」の値の合計が「12」になっていれば、どんなパターンでもOKです。オンズ株式会社オンズ制作チーム。ウェブサイト制作、デザイン制作でお悩みの際はお気軽にご相談ください。https://on-ze.comTwitterFacebookFeedlyLINEこちらの記事もいかがですか?アナタにオススメ!同じカテゴリーの他の記事です。【CSS3】ブラウザの限界を突破した極小サイズの文字を表示させてみた。CSS】新しい「スタイルシート・リセット」のカタチ。【CSS3】要素をクルクル回転させる。【CSS】マウスカーソルの形状を変える。【CSS3】最新の単位[vw][vh][vmin][vmax]の解説。【CSS3】[display:table-cell;]に[margin]を指定したい場合の処理。記述した[br]タグを無効にして改行させない方法。