💡 記事の下にエディタを用意しています。壊してもOK！
更新日: 2025年3月1日
CSS Gridでカードレイアウトを作る方法
📌
結論
GridとCSSの組み合わせでカードレイアウトが作れます
📝 実際のコードはこちら
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { padding: 16px; border: 1px solid #ccc; border-radius: 8px; }カードUIの構成
| 要素 | CSSプロパティ |
|---|---|
| 外枠 | border または box-shadow |
| 角丸 | border-radius |
| 内側余白 | padding |
| 並び | display: grid |
まとめ
・カードレイアウト = Grid + border + padding + border-radius ・repeat(3, 1fr) で3列を簡潔に書ける
演習で試してみよう
3つのカードをGridで横並びにしてみましょう。🧪 ここで試せます ─ 壊しても大丈夫！
下のエディタで実際にコードを書いて、すぐにプレビューで確認できます。何度でもやり直せるので、思い切って色々試してみてください。
■ 演習
3つのカードをGridで横並びにし、各カードにpaddingとborderを付けてください。
詰まったらヒント
grid-template-columns: repeat(3, 1fr)