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

次のステップ

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

カタログを見る