パーツ番号 06-06-04 ・ CSSのみ

チームメンバーグリッド(4名並列)

4名分のミニカードを2×2グリッドで並べた一覧。会社紹介ページのチーム紹介セクションに向く構成です。

staticcss

プレビュー

ソースコード

HTML

<div class="team">
          <div class="member"><span class="av">A</span><span class="nm">安田</span></div>
          <div class="member"><span class="av">B</span><span class="nm">伊藤</span></div>
          <div class="member"><span class="av">C</span><span class="nm">中村</span></div>
          <div class="member"><span class="av">D</span><span class="nm">高橋</span></div>
        </div>

CSS

.d06-06-04 .team{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;width:100%;max-width:220px;}
        .d06-06-04 .member{display:flex;flex-direction:column;align-items:center;gap:6px;}
        .d06-06-04 .av{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#10b981,#34d399);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;font-family:sans-serif;}
        .d06-06-04 .nm{font-size:11px;color:#334155;font-family:sans-serif;}

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