CSS Gridで3列レイアウトを作る方法

📌

結論

display: grid + grid-template-columns で格子状レイアウトが作れます

CSS Gridは2次元レイアウトの決定版です。

📝 実際のコードはこちら

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

これで子要素が3列に等分されて並びます。

frとは

fr はfraction（分数）の略で、**残りの空間を等分する単位**です。

・display: grid で格子状レイアウト・grid-template-columns で列数を指定・fr 単位で柔軟に分割・gap で間隔を指定

CSS Gridで3列のレイアウトを作ってみましょう。

🧪 ここで試せます ─ 壊しても大丈夫！

下のエディタで実際にコードを書いて、すぐにプレビューで確認できます。何度でもやり直せるので、思い切って色々試してみてください。

■ 演習

親divをGridにして、子要素を3列に並べてください。

詰まったらヒント

display: grid; grid-template-columns: 1fr 1fr 1fr;