CSS基礎 練習問題 10:CSSグリッドレイアウト
3列のグリッドレイアウトを作り、各列に16pxの間隔を持たせたい場合、正しいCSSの書き方はどれですか?
- display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
- display: grid; grid-columns: 3; gap: 16px;
- display: grid; columns: 3; gap: 16px;
- display: flex; flex-columns: 3; gap: 16px;
- display: grid; divide: 3; gap: 16px;
正解と解説を見る
正解:display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
CSSグリッドで3列レイアウトを作るには、`display: grid;`と`grid-template-columns: repeat(3, 1fr);`で3列を定義し、`gap: 16px;`でセル間隔を指定します。