パーツ番号 06-15-11 ・ CSSのみ

SNSフィード一覧グリッド

正方形の投稿サムネイルを格子状に並べたSNSフィード風グリッドです。ショップサイトのInstagramギャラリー欄の構成検討に使える静止見本です。

staticcss

プレビュー

ソースコード

HTML

<div class="d06-15-11-wrap">
          <div class="d06-15-11-head">&#64;shop_official のフィード</div>
          <div class="d06-15-11-grid">
            <span class="d06-15-11-cell"></span><span class="d06-15-11-cell"></span><span class="d06-15-11-cell"></span>
            <span class="d06-15-11-cell"></span><span class="d06-15-11-cell"></span><span class="d06-15-11-cell"></span>
          </div>
        </div>

CSS

.d06-15-11-wrap{ width:100%; max-width:220px; text-align:left; }
        .d06-15-11-head{ font-size:11px; font-weight:700; color:#374151; margin-bottom:8px; }
        .d06-15-11-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
        .d06-15-11-cell{ display:block; aspect-ratio:1/1; border-radius:4px; }
        .d06-15-11-cell:nth-child(1){ background:linear-gradient(135deg,#ffd3a5,#fd6585); }
        .d06-15-11-cell:nth-child(2){ background:linear-gradient(135deg,#a1c4fd,#c2e9fb); }
        .d06-15-11-cell:nth-child(3){ background:linear-gradient(135deg,#84fab0,#8fd3f4); }
        .d06-15-11-cell:nth-child(4){ background:linear-gradient(135deg,#f6d365,#fda085); }
        .d06-15-11-cell:nth-child(5){ background:linear-gradient(135deg,#c9a0ff,#8f6aff); }
        .d06-15-11-cell:nth-child(6){ background:linear-gradient(135deg,#ffafbd,#ffc3a0); }

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