【React初心者メモ】gapとspaceの違い

Last updated at 2025-07-26Posted at 2025-05-05

単純な横並びのアイテム（ボタン群など）には、space-*
折り返しを含むレスポンシブレイアウトやgrid構造では、gap-*

上記のような使い分けはありますが、現在のモダンなスタイルでは、シンプルな横並びでもgap-*を使う方が主流であり推奨されています。

Flexbox専用で、子要素間のマージンを制御する
指定方法は、
space-x-<n>：横方向のスペース制御
space-y-<n>：縦方向のスペース制御

<div class="flex space-x-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

FlexboxとGrid両対応で、コンテナ内の要素の隙間を均等に制御します
指定方法は、
gap-<n>：行間と列間の両方を同時に設定
gap-x-<n>：横方向のスペースを制御
gap-y-<n> ：縦方向のスペース制御

<div class="grid grid-cols-3 gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>