2 カラムレスポンシブ（SP で縦並び）
パソコンでは左右 2 カラム に並び、スマートフォンでは自動で 縦 1 カラム へ切り替わる、最も基本的なレスポンシブレイアウトです。CSS Grid を使い、通常は grid-template-columns:1fr 1fr で均等な 2 列を作り、 gap で列の間隔をとります。
解説
パソコンでは左右2 カラムに並び、スマートフォンでは自動で縦 1 カラムへ切り替わる、最も基本的なレスポンシブレイアウトです。CSS Grid を使い、通常は grid-template-columns:1fr 1fr で均等な 2 列を作り、gap で列の間隔をとります。画面幅が 600px 以下になると @media 内で grid-template-columns:1fr に変わり、二つのブロックが上下に積み重なります。
よく使う場面
- サービス紹介の「特徴」と「画像」の並び
- 社長メッセージなど文章と写真の組み合わせ
- 料金や比較の左右対比
列幅は 1fr 1fr を 2fr 1fr のように変えれば左右の比率を調整できます。縦並びに切り替わる境目は max-width:600px の数値で決まり、内容量に合わせて変えられます。Grid の gap は行と列の余白を一括で扱えるので、縦並びになったときの上下間隔も自動で揃います。画像を入れる場合は縦並び時に大きくなりすぎないよう max-width を添えると安定します。
使用例・適したシーン
- 商品一覧表示
- ブログ記事カード一覧
- メンバー一覧
よくある質問
左右の幅を均等でなく変えられますか
変えられます。grid-template-columns の 1fr 1fr を 2fr 1fr などにすると、左を広く右を狭くといった比率調整ができます。fr は残り幅を比率で分け合う単位です。
縦並びに切り替わる画面幅を変えるには
@media(max-width:600px) の 600px を任意の値に変更してください。コンテンツが詰まって見える幅を実機で確認し、その手前で 1 カラムへ切り替えるのが目安です。