チームメンバーグリッド
このセクションは、メンバー紹介を display:grid の repeat(auto-fit,minmax(160px,1fr)) で並べた採用ページ向けレイアウトです。列数を固定せず、画面幅に応じて 4 列が 2 列、1 列へと自動で折り返すため、スマホからワイドモニターまで 1 つの記述でカバーできます。
解説
このセクションは、メンバー紹介を display:grid の repeat(auto-fit,minmax(160px,1fr)) で並べた採用ページ向けレイアウトです。列数を固定せず、画面幅に応じて 4 列が 2 列、1 列へと自動で折り返すため、スマホからワイドモニターまで 1 つの記述でカバーできます。各カードは figure と figcaption で組み、円形アバターはグラデーション背景に頭文字を place-items:center で中央寄せしています。JavaScript は不要で、CSS だけで完結します。
使う場面
- 採用 LP の「メンバー紹介」「私たちについて」ブロック
- 士業・クリニック・サロンのスタッフ一覧
- 登壇者やアドバイザーを並べるイベントページ
カスタマイズでは、頭文字の代わりに実写を入れる場合 img に width/height と alt を付け、人物が中央に来るようクロップしてから差し込みます。最小幅 160px を上げれば 1 行あたりの人数が減って 1 人を大きく見せられ、下げると密度が上がります。役職テキストの color やアクセントの letter-spacing を調整するとブランドに馴染みます。
使用例・適したシーン
- コーポレートサイト構築
- サービス LP
- 採用ページ
- 事業紹介資料 Web 版
よくある質問
列数はどうやって変えますか。
minmax の最小幅（初期値160px）を変えると自動で列数が決まります。値を大きくすると1行あたりの人数が減って各メンバーが大きく表示され、小さくすると列数が増えます。列数を直接指定したい場合はauto-fitをやめてrepeat(3,1fr)のように固定列にします。
頭文字のアバターを実際の顔写真に置き換えられますか。
できます。sc-tg__avatarの中にimgを入れ、object-fit:coverと丸い形を保つborder-radius:50%を適用します。読み込み速度のためWebPにし、width・height・altを必ず付けてください。