パーツ番号 01-05-11 ・ CSSのみ

12カラムグリッドシステム見本

col-4+col-8やcol-3×4など、12分割の組み合わせパターンを並べた静止見本です。WordPressのカスタムレイアウトを設計する際のグリッド基準表として使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-05-11-wrap">
          <div class="d01-05-11-row">
            <span class="d01-05-11-col" style="grid-column:span 4">col-4</span>
            <span class="d01-05-11-col" style="grid-column:span 8">col-8</span>
          </div>
          <div class="d01-05-11-row">
            <span class="d01-05-11-col" style="grid-column:span 3">col-3</span>
            <span class="d01-05-11-col" style="grid-column:span 3">col-3</span>
            <span class="d01-05-11-col" style="grid-column:span 3">col-3</span>
            <span class="d01-05-11-col" style="grid-column:span 3">col-3</span>
          </div>
          <div class="d01-05-11-row">
            <span class="d01-05-11-col" style="grid-column:span 12">col-12</span>
          </div>
        </div>

CSS

.prev.d01-05-11{padding:16px}
        .d01-05-11-wrap{width:100%;max-width:320px;display:flex;flex-direction:column;gap:8px}
        .d01-05-11-row{display:grid;grid-template-columns:repeat(12,1fr);gap:6px}
        .d01-05-11-col{grid-row:1;background:#eef2ff;border:1px solid #c7d2fe;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:9.5px;color:#4338ca;font-weight:700;padding:10px 2px}

クラス名 .d01-05-11 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。