FlexboxとCSS Gridの使い分け方、よく見かけるUIコンポーネントをFlexboxとGridで実装するテクニックのまとめ

FlexboxとCSS Gridのどちらを使った方がよいか悩んだことはありませんか？ FlexboxとCSS Gridの使い分け方、それぞれの違い、Flexboxの実装例、CSS Gridの実装例、FlexboxとCSS Gridを組み合わせた実装例、フォールバックと古いブラウザのサポート方法を解説します。 Grid for layout, Flexbox for components by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS GridとFlexboxの違い CSS GridとFlexboxの使い分け方 CSS Gridの実装例 Flexboxの実装例 CSS GridとFlexboxを組み合わせて使用する フォールバックと古いブラウザのサポート CSS GridまたはF

[coliss]

CSS GridとFlexboxの違い、使い分け方、CSS Gridの実装例、Flexboxの実装例、CSS GridとFlexboxを組み合わせた実装例、フォールバックと古いブラウザのサポート方法。

[kuracom]

Gridは稀に使うけどいつも設定忘れてるからCSS Grid Generatorで形作って、IE11向けにAutoprefixer通すようにしてる

[chihiru]

gridはめんどくさく感じてしまうのでflexでどうしても無理なレイアウトの時しか使わない…

[naga_sawa]

Flexbox は横並べ配置/Gridは文字通りグリッド配置

[spark7]

flexはx or y方向のみでgridはxy方向用だろう。元々の用途が違うような。

[kjtec]

GSS GridとFlexboxについて

[digi_yoko]

css

[tk_musik]

凡例とかgrid使って描くわ。楽しい。

[kijtra]

gridてまず使わないな。flexで充分。

[gachapining]

Grid は IE11 固有のバグを踏む確率が高いのでちょっと敬遠しちゃう。

[mayumayu_nimolove]

flexで事足りてる、というかflexでできないレイアウトはしないのでなかなかgridを学ぶ機会がない。