カラムの設定方法(レスポンシブ対応)
カラムの作り方には、幾つかの方法が存在するので、デザインやサイトの構造に合わせて使い分けしていくと良いよ。
今回はカラム分けの作り方を幾つか紹介していくね。
目次
PCは最大4カラムで自動拡張/SPは2カラム
(Grid + auto-fit 最小幅%指定)
- Card 1
- Card 2
- Card 3
- Card 4
- Card 5
- Card 6
カラム数が4カラム未満の場合横幅は自動的に広がるバージョン
- Card 1
- Card 2
See the Pen Untitled by kens yokota (@mailpt05) on CodePen.
4カラム以内なら自動的に横幅が広がる。
“25%を最小幅”にすることで最大4列にキャップ。要素が4カラムより少ないときは自動で横に伸びるよ。
ポイント
auto-fit
は余白トラックを畳むので、アイテム数が少ないと自然に横幅が広がる。%指定の minmax
で「最大列数」を制御(25% → 4列、33.333% → 3列、50% → 2列)。
grid-template-columns: repeat(
auto-fit,
minmax(calc((100% - 3 * var(--gap)) / 4), 1fr)
);
/*カラム数を3や2にしたい場合、上記「/ 4)」を変更*/
常に固定列数で折り返す/SPは2カラム
(Grid 固定 repeat)
- Card 1
- Card 2
- Card 3
- Card 4
- Card 5
- Card 6
カラム数が4未満でも横幅が固定されているバージョン
- Card 1
- Card 2
See the Pen Untitled by kens yokota (@mailpt05) on CodePen.
“カラムが何個増えても一定の数で折り返す” の王道。
例えば PC=4列固定/SP=2列固定。
ポイント
- アイテム数が増減しても必ず指定列数に揃う(自動拡張はしない)。
- 「2カラム記事」「3カラム記事」としての見栄えを固定したいときに向く。
Flexboxでラップ(計算幅)/SPは2カラム
(Flex + wrap)
- Card 1
- Card 2
- Card 3
- Card 4
- Card 5
- Card 6
See the Pen Untitled by kens yokota (@mailpt05) on CodePen.
画像比率がマチマチ/カード高さがズレやすい時に手堅い。
gap非対応ブラウザが気になるなら margin
でもOK。
ポイント
flex-basis
を%
計算にする事で擬似的に列数固定。- アイテム不足時は余白が空く(Aほどの自動拡張はない)。均等に伸ばしたい場合はGridが有利。
自動折り返し=マルチカラム(新聞風)/SPは2カラム
(CSS Columns)
- Card 1
- Card 2
- Card 3
- Card 4
- Card 5
- Card 6
See the Pen Untitled by kens yokota (@mailpt05) on CodePen.
“高さがバラバラなカード”で縦流しにしたいときに便利(擬似マasonry)。
ただし読み順は縦列になる点に注意(アクセシビリティ面で不向きな場合あり)。
古典的手法(inline-block)
※レガシー互換用
- Card 1
- Card 2
- Card 3
- Card 4
- Card 5
- Card 6