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

モザイクタイルグリッド

高さの異なるタイルを敷き詰めた配置見本です。WordPressのギャラリーページやポートフォリオ一覧のレイアウトに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-05-04-mosaic">
          <div class="d01-05-04-t d01-05-04-t1">1</div>
          <div class="d01-05-04-t d01-05-04-t2">2</div>
          <div class="d01-05-04-t d01-05-04-t3">3</div>
          <div class="d01-05-04-t d01-05-04-t4">4</div>
          <div class="d01-05-04-t d01-05-04-t5">5</div>
        </div>

CSS

.prev.d01-05-04{padding:14px}
        .d01-05-04-mosaic{width:100%;max-width:320px;height:220px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:8px}
        .d01-05-04-t{border-radius:8px;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:flex-start;padding:8px}
        .d01-05-04-t1{grid-row:1/3;background:linear-gradient(160deg,#a855f7,#c084fc)}
        .d01-05-04-t2{background:linear-gradient(160deg,#ec4899,#f472b6)}
        .d01-05-04-t3{grid-row:1/3;background:linear-gradient(160deg,#3b82f6,#60a5fa)}
        .d01-05-04-t4{background:linear-gradient(160deg,#14b8a6,#2dd4bf)}
        .d01-05-04-t5{grid-column:3;background:linear-gradient(160deg,#f97316,#fb923c)}

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