今回の課題

3×2の格子こうし（6枚まいのカード）を作つくろう！

📖 解説を見る

⬛ CSS Gridで格子状こうしじょうに並ならべよう！

CSS Gridは「縦横たてよこのマス目め」に要素ようそを配置はいちできます。

✏️ 書かき方かた：

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

⚠️ ポイント：
・grid-template-columns で列数れつすうを決きめる
・1fr は「均等きんとうに分割ぶんかつ」という意味いみ
・repeat(3, 1fr) は 1fr 1fr 1fr と同おなじ

ヒントを見る

.grid に display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; を書こう！

📄 見本

「答えを見る」を押すと、お手本のプレビューとコードが出ます。

💻 コードエディタ

あなたの出力

🏠 ホームへ

れんしゅうもんだい

☑ 0 / 3 正解レッスンに戻る

全問正解でクエストクリア！

未挑戦

問題 1: grid-template-columns: repeat(4, 1fr) で4列れつにしてみよう！（自由じゆう回答かいとう）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

未挑戦

問題 2: grid-template-columns: 2fr 1fr で左ひだりが広ひろい2列れつを作つくろう！（自由じゆう回答かいとう）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

未挑戦

問題 3: グリッドで写真しゃしんギャラリー風ふうのレイアウトを自由じゆうに作つくろう！（自由じゆう回答かいとう）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

次のクエスト →

クエスト11：グリッドレイアウト