12カラムグリッドレイアウトのCSS実装

Bootstrap風の12カラムグリッドシステムをCSS Gridで実装。repeat(12, 1fr)でレスポンシブな基盤が作れます。

プレビュー

.col-12

.col-8

.col-4

HTML

<div class="grid-container">
  <div class="item-1">.col-12</div>
  <div class="item-2">.col-8</div>
  <div class="item-3">.col-4</div>
  <div class="item-4">.col-4</div>
  <div class="item-5">.col-4</div>
  <div class="item-6">.col-4</div>
</div>

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
  height: 400px;
}

.item-1 { grid-area: 1 / 1 / 2 / 13; }
.item-2 { grid-area: 2 / 1 / 3 / 9; }
.item-3 { grid-area: 2 / 9 / 3 / 13; }
.item-4 { grid-area: 3 / 1 / 4 / 5; }
.item-5 { grid-area: 3 / 5 / 4 / 9; }
.item-6 { grid-area: 3 / 9 / 4 / 13; }

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
  }
  .grid-container > * {
    grid-area: auto;
  }
}

このレイアウトの解説

12カラムグリッドは、Web制作の現場で最も使われているグリッドシステムのひとつです。12は2・3・4・6で割り切れるため、1/2・1/3・1/4・1/6といった比率を自由に組み合わせられます。CSS Gridならrepeat(12, 1fr)の1行で土台を作り、各要素にgrid-column: span Nを指定するだけで、Bootstrap同等のレイアウトが手書きで書けます。

どんな場面で使う？

Bootstrap・Tailwindなどのフレームワークを使わずに、柔軟なカラム幅の組み合わせを実現したい場合に最適です。

自分でカスタマイズしたい方へ

列数・行数・Gap・セルの範囲を自由に変更したい場合は、CSS Grid Generatorでドラッグ操作によりオリジナルのグリッドを作成できます。詳しい使い方は使い方ガイドをご覧ください。

ジェネレーターで自分のグリッドを作る →