← クエスト一覧

クエスト29：CSS Gridの基礎

スライド 1 / 2

コーデ

💻 コード例

実行結果

今回の課題

3列のグリッドを作って6つのボックスを並べよう！

📖 解説を見る

🔲 CSS Gridで2次元レイアウト！

display: grid でグリッドレイアウトが使えるよ！
grid-template-columns で列の幅を指定しよう。

ヒントを見る

.container に display: grid; grid-template-columns: repeat(3, 1fr); を追加しよう！

📄 見本

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

💻 コードエディタ

あなたの出力

次へ →

🏠 ホームへ

れんしゅうもんだい

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

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

未挑戦

問題 1: 2列のグリッドに変えてみよう！（自由回答）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

未挑戦

問題 2: gap を 20px に変えてみよう！（自由回答）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

未挑戦

問題 3: 4列のグリッドに変えてみよう！（自由回答）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

次のクエスト →

コピーしました！