カラムの作り方には、幾つかの方法が存在するので、デザインやサイトの構造に合わせて使い分けしていくと良いよ。
今回はカラム分けの作り方を幾つか紹介していくね。

PCは最大4カラムで自動拡張／SPは2カラム
(Grid + auto-fit 最小幅%指定)

カラム数が4カラム未満の場合横幅は自動的に広がるバージョン

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)

カラム数が4未満でも横幅が固定されているバージョン

See the Pen Untitled by kens yokota (@mailpt05) on CodePen.

“カラムが何個増えても一定の数で折り返す” の王道。
例えば PC=4列固定／SP=2列固定。

ポイント

• アイテム数が増減しても必ず指定列数に揃う（自動拡張はしない）。
• 「2カラム記事」「3カラム記事」としての見栄えを固定したいときに向く。

Flexboxでラップ（計算幅）／SPは2カラム
（Flex + wrap）

See the Pen Untitled by kens yokota (@mailpt05) on CodePen.

画像比率がマチマチ／カード高さがズレやすい時に手堅い。
gap非対応ブラウザが気になるなら margin でもOK。

ポイント

• flex-basis を % 計算にする事で擬似的に列数固定。
• アイテム不足時は余白が空く（Aほどの自動拡張はない）。均等に伸ばしたい場合はGridが有利。

自動折り返し＝マルチカラム（新聞風）／SPは2カラム
（CSS Columns）

See the Pen Untitled by kens yokota (@mailpt05) on CodePen.

“高さがバラバラなカード”で縦流しにしたいときに便利（擬似マasonry）。
ただし読み順は縦列になる点に注意（アクセシビリティ面で不向きな場合あり）。

古典的手法（inline-block）
※レガシー互換用

See the Pen Untitled by kens yokota (@mailpt05) on CodePen.