パーツ番号 09-13-05 ・ CSSのみ

商品カードグリッド用スケルトン

正方形の商品画像とタイトル・価格行を並べたグリッド型プレースホルダー。ECサイトの商品一覧が読み込まれるまでの表示に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="grid09-13-05">
          <div class="pcard09-13-05">
            <div class="pimg09-13-05"></div>
            <div class="ptitle09-13-05"></div>
            <div class="pprice09-13-05"></div>
          </div>
          <div class="pcard09-13-05">
            <div class="pimg09-13-05"></div>
            <div class="ptitle09-13-05"></div>
            <div class="pprice09-13-05"></div>
          </div>
          <div class="pcard09-13-05">
            <div class="pimg09-13-05"></div>
            <div class="ptitle09-13-05"></div>
            <div class="pprice09-13-05"></div>
          </div>
          <div class="pcard09-13-05">
            <div class="pimg09-13-05"></div>
            <div class="ptitle09-13-05"></div>
            <div class="pprice09-13-05"></div>
          </div>
        </div>

CSS

.d09-13-05 .grid09-13-05{
          display:grid;
          grid-template-columns:1fr 1fr;
          gap:12px;
          width:100%;
          max-width:260px;
        }
        .d09-13-05 .pcard09-13-05{
          background:#fff;
          border:1px solid #e5e7eb;
          border-radius:10px;
          padding:10px;
          font-family:sans-serif;
        }
        .d09-13-05 .pimg09-13-05{
          width:100%;
          aspect-ratio:1/1;
          border-radius:6px;
          background:linear-gradient(135deg,#cbd5e1,#e2e8f0);
          margin-bottom:8px;
        }
        .d09-13-05 .ptitle09-13-05{
          width:85%;
          height:9px;
          border-radius:3px;
          background:linear-gradient(135deg,#dbe1e8,#eef1f5);
          margin-bottom:6px;
        }
        .d09-13-05 .pprice09-13-05{
          width:50%;
          height:9px;
          border-radius:3px;
          background:linear-gradient(135deg,#e2e8f0,#f1f5f9);
        }

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