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

雑誌風非対称グリッド

大きな写真枠と複数の小記事枠を非対称に配置した構図見本です。WordPressのニュース一覧や特集ページの骨組みに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-05-02-wrap">
          <div class="d01-05-02-main">メイン記事</div>
          <div class="d01-05-02-side">
            <div class="d01-05-02-item">記事A</div>
            <div class="d01-05-02-item">記事B</div>
            <div class="d01-05-02-item">記事C</div>
          </div>
        </div>

CSS

.prev.d01-05-02{padding:14px}
        .d01-05-02-wrap{width:100%;max-width:340px;height:220px;display:grid;grid-template-columns:1.5fr 1fr;gap:10px}
        .d01-05-02-main{border-radius:10px;background:linear-gradient(150deg,#0ea5e9,#38bdf8);color:#fff;display:flex;align-items:flex-end;padding:12px;font-size:13px;font-weight:700}
        .d01-05-02-side{display:flex;flex-direction:column;gap:10px}
        .d01-05-02-item{flex:1;border-radius:8px;background:#f1f5f9;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;font-size:12px;color:#475569;font-weight:600}

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