Qraft(クラフト) 資格・学習クイズアプリ

CSS基礎 練習問題 10:CSSグリッドレイアウト

3列のグリッドレイアウトを作り、各列に16pxの間隔を持たせたい場合、正しいCSSの書き方はどれですか?

  1. display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  2. display: grid; grid-columns: 3; gap: 16px;
  3. display: grid; columns: 3; gap: 16px;
  4. display: flex; flex-columns: 3; gap: 16px;
  5. 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;`でセル間隔を指定します。

← 前の問題問題一覧次の問題 →
アプリで解いてレーティングを上げる(無料・登録不要)