はじめに
CSSでレイアウトを組むとき、「FlexBoxこそが神！」と言われるほどFlexBoxを愛用していました。しかし、カード形式の実装ではFlexboxだと手間がかかり、思ったようにレイアウトできないことがありました。
ある時、ChatGPTに「カードを実装してください」と依頼したところ、「Grid」で実装するコードが返ってきました。そのコードを見て、簡単に実装できることに驚き、「Grid最高！」と感動しました。
今回はその内容についてまとめます。
Flexboxでカード実装
まずは「Flexbox」でカードを実装します。
See the Pen Untitled by rei-dev99 (@rei-dev99) on CodePen.
説明
ポイント1
- 親要素でFlexbox対応、折り返し、列行間を指定
.flex-container {
display: flex;
flex-wrap: wrap;
gap: 30px;
}
ポイント2
- 子要素の伸び率と縮み率を一定にし、幅を
50%として、30px分をマイナス
.card {
flex: 1 1 calc(50% - 30px);
}
これは「flex-grow」「flex-shrink」「flex-basis」をまとめて記述したものです。
子要素の伸び率を一定(flex-growとflex-shrink)にして、幅を50%(flex-basis)に設定し、gapで指定した30px分をマイナスにしてます。
おまけ
- 行列間の指定
gap: 30px;
このgapのおかげで次のnth-childを使ったマージン指定を省略できています。
.card:not(:nth-child(2n + 1)) {
margin-left: 30px;
}
.card:nth-child(n + 3) {
margin-top: 30px;
}
nth-childは子要素の番号などを指定してスタイルを当てるための擬似クラスです。
上のカードだと右2つのカードにだけmargin-leftを指定して、下2つのカードにだけmargin-topを当てるようにしています。
以前はgapでなくnth-childを使っていたので、もどかしさを感じていました。
似たようなものでnth-of-typeという擬似クラスもあります。
問題
これだと実はレスポンシブ用にコードを書き足す必要があって面倒なんですよね。
しかし「Grid」を使えばその必要はないんです。
Gridでカード実装
次に「Grid」でやってみます。
See the Pen Untitled by rei-dev99 (@rei-dev99) on CodePen.
ポイント
- 親要素でGrid対応、自動調整される列、列行間指定
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
}
grid-template-columnsプロパティで自動調整される列を定義します。repeat(auto-fit, minmax(250px, 1fr))により、コンテナの幅に応じてカードの列数が変動します。各カードの最小幅は250pxで、最大幅は残りのスペースを均等に分けます。
この記述だけでレスポンシブ対応が簡単にできます。
FlexboxとGridを使い分ける
それぞれ強みは分かれそうです。
Flexbox
Flexboxでは下記のようなもので使うと良さそうです。
- ナビゲーションバー
- ツールバー
- メニューバー
- 水平/垂直にコンテンツを並べる(ボタンなど)
テキスト系並べるときに使うと良さそうです。
Grid
Gridでは下記のようなもので使うと良さそうです。
- ダッシュボード
- 写真ギャラリー
- 複数のコンテンツエリアを持つレイアウト
- カードレイアウト
画像や文字をもつコンテンツの配置に使うと良さそうです。
おすすめの学習サイト
Flexboxチートシート
Flexboxが理解できるゲーム(すごくおすすめ)
Grid理解
おわりに
FlexBoxだけが正義だと思っていましたが、Gridの凄さに気づいてからはもう手放せません。
今後は、FlexBoxとGridをうまく使い分けて、レイアウトを実現していこうと思います。ぜひ、FlexboxとGridを活用して、素敵なレイアウトを実現してみてください。
この記事の内容に不備や改善点があれば、ご指摘いただけると嬉しいです。