Layout

Gridレイアウト

CSS Grid を使った高度なレイアウト実装

基本的なグリッド
grid-cols-* でカラム数を指定

grid-cols-2(2列)

1
2
3
4

grid-cols-3(3列)

1
2
3
4
5
6

grid-cols-4(4列)

1
2
3
4
5
6
7
8
col-span / row-span
セルの結合(複数カラム・行にまたがる)
col-span-2
row-span-2
1
2
3
4
col-span-3
5
レスポンシブグリッド
ブレークポイントに応じてカラム数を変更

sm:grid-cols-1 → md:grid-cols-2 → lg:grid-cols-3
画面サイズを変えて確認してください

Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
gap プロパティ
グリッドアイテム間のスペースを制御

gap-1(小さい間隔)

1
2
3
4

gap-4(標準間隔)

1
2
3
4

gap-8(大きい間隔)

1
2
3
4
Next Steps
次のステップ

アニメーションの実装を学んでみましょう。

カタログを見る