CSS
Grid
読み方：グリッド
行と列で要素を配置するレイアウト方法。Flexboxより複雑なレイアウトに向く。
やさしい説明
Grid（グリッド）とは、要素を格子状に配置するCSSレイアウト方法です。
行と列を定義して、要素を自由に配置できます。複雑なレイアウトに向いています。
具体例・使い方
display: grid;
grid-template-columns: 1fr 1fr 1fr; → 3列均等
gap: 20px; → 要素間の隙間
よくある疑問
Q: Gridはいつ使う？
A: カードの一覧表示、ダッシュボード、複雑なレイアウトなど、2次元の配置が必要なときに使います。
関連用語
📖 関連レッスン
レッスンを見る →