CSS
CSS Grid
中級読み方：シーエスエスグリッド｜英語：Css Grid
行と列の2次元レイアウトを作るCSS機能。複雑なページレイアウトを直感的に組める。
やさしい説明
CSS Gridは、Webページを行と列のマス目に分けてレイアウトする仕組みです。
Flexboxが1方向の並びに強いのに対し、Gridは縦横両方を同時に制御できます。
具体例・使い方
display: grid; grid-template-columns: repeat(3, 1fr); → 3列均等
カード一覧やダッシュボードのレイアウトに最適
よくある疑問
Q: FlexboxとGridの使い分けは？
A: 1方向の並びはFlexbox、2次元のレイアウトはGridが適しています。
関連用語
📖 関連レッスン
レッスンを見る →