会員登録すると
学習することができます。
会員登録する（無料）
学習することができます。
登録済みの方はこちら
ログイン
Gridによるレイアウト設計
目安学習時間 7分
学ぶ目的
Gridとは
格子状にレイアウトを組む仕組みです。親要素に grid を付け、grid-cols-3 のように列数を指定すると、子要素が自動的に格子に並びます。
列と間隔
grid-cols-2 なら2列、grid-cols-4 なら4列です。間隔はFlexboxと同じく gap- で指定します。カード一覧や画像ギャラリーのような、規則的に並べたい場面で威力を発揮します。
Flexboxとの使い分け
1方向に並べるならFlexbox、行と列の両方を整えたいならGrid——この基準で選ぶと迷いません。
このレクチャーで学ぶこと
- grid の基本
- 列数の指定（grid-cols-）
- Flexboxとの使い分け
質問
まだ質問は投稿されていません。
質問投稿
ログイン後に質問の投稿ができます。
理解度チェックテストに
合格しました！
おめでとうございます！
Tailwind CSS初級
Tailwind CSS初級講座
Gridによるレイアウト設計
理解度チェックテストに合格しました！
＼ SNSにシェアする ／
