【React初心者メモ】FelxとGridの違い

単純な横並び・縦並びには Flexbox、複数列のグリッド構造には Grid が一般的です。

Flexbox

1次元レイアウト（横 or 縦）に特化し、要素の並びや揃えに強い

// 横並び＋中央揃え＋要素間スペース
<div className="flex flex-row justify-center items-center space-x-4">
  <div>Item A</div>
  <div>Item B</div>
  <div>Item C</div>
</div>

flex：Flexboxコンテナを有効化
flex-row：横方向（左→右）に並べる
flex-col：縦方向（上→下）に並べる
flex-row-reverse：横方向（右→左）に並べる
flex-col-reverse：縦方向（下→上）に並べる

Grid

2次元レイアウト（行 × 列）に特化し、複雑なレイアウトを行列単位で制御できる

// 3列グリッド＋ギャップ
<div className="grid grid-cols-3 gap-4">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
  <div>Card 4</div> {/* 自動で2行目の1列目に配置 */}
</div>

grid：Grid レイアウトを有効化
grid-cols-<n>：列数を<n>列に設定
grid-rows-<n>：行数を<n>行に設定
col-start-<n>：開始位置を列数<n>列に設定
row-start-<n>：開始位置を行数<n>行に設定
col-end-<n>：列の終了位置を<n>列目に設定
row-end-<n>：行の終了位置を<n>行目に設定
col-span-<n>：列にまたがる数を<n>列分に設定
row-span-<n>：行にまたがる数を<n>行分に設定