クエスト9：グリッドレイアウトのクラス

今回の課題

div に grid grid-cols-3 gap-4 を追加して3列グリッドを作り、次の div にはヘッダーで col-span-2 を使おう！

📖 解説を見る

⊞ グリッドで整列レイアウトを作ろう

• grid：グリッドを有効化
• grid-cols-N：N列のグリッド
• gap-N：セル間の隙間
• col-span-N：N列分のスペースを占有

レスポンシブ：grid-cols-1 md:grid-cols-3

ヒントを見る

grid grid-cols-3 gap-4 mb-8 を付けよう。2カラムは grid grid-cols-2 gap-4。ヘッダーは col-span-2 bg-green-300 p-4 rounded text-center font-bold

📄 見本

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

💻 コードエディタ

あなたの出力

このクエストはプレミアム限定です