パーツ番号 01-10-09 ・ CSSのみ

ウィジェット自由配置風グリッド

大小のウィジェットが不規則に組み合わさるグリッド構成。ダッシュボードのカスタムレイアウト案として見せる静止サンプル。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-10-09-grid">
          <div class="w a"></div>
          <div class="w b"></div>
          <div class="w c"></div>
          <div class="w d"></div>
        </div>

CSS

.prev.d01-10-09{padding:16px;align-items:stretch}
        .d01-10-09-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:10px;width:100%;height:240px;font-family:sans-serif}
        .d01-10-09-grid .w{border-radius:8px}
        .d01-10-09-grid .a{grid-column:1/3;grid-row:1/3;background:#38bdf8}
        .d01-10-09-grid .b{grid-column:3/5;grid-row:1/2;background:#a78bfa}
        .d01-10-09-grid .c{grid-column:3/4;grid-row:2/3;background:#fb923c}
        .d01-10-09-grid .d{grid-column:4/5;grid-row:2/3;background:#34d399}

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