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

bentoグリッド

大小の矩形を組み合わせた非対称の枠組みです。WordPressのトップページで機能や実績を強弱つけて並べる区画に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-05-01-grid">
          <div class="d01-05-01-big d01-05-01-b1">A</div>
          <div class="d01-05-01-small d01-05-01-s1">B</div>
          <div class="d01-05-01-small d01-05-01-s2">C</div>
          <div class="d01-05-01-big d01-05-01-b2">D</div>
        </div>

CSS

.prev.d01-05-01{padding:14px}
        .d01-05-01-grid{width:100%;max-width:320px;height:220px;display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:1fr 1fr;gap:10px}
        .d01-05-01-grid > div{display:flex;align-items:flex-end;justify-content:flex-start;padding:12px;border-radius:10px;font-size:13px;font-weight:700;color:#fff}
        .d01-05-01-b1{grid-row:1/3;background:linear-gradient(135deg,#6366f1,#818cf8)}
        .d01-05-01-s1{background:linear-gradient(135deg,#f59e0b,#fbbf24)}
        .d01-05-01-s2{background:linear-gradient(135deg,#10b981,#34d399)}
        .d01-05-01-b2{grid-column:2;background:linear-gradient(135deg,#ef4444,#f87171)}

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