Gridはflexboxよりもはるかにシンプルで視覚的な選択肢です、flexboxでは要素を一方向に揃えることしかできません。Gridは、非常に自由度の高い表のように、独自のプロパティを持つセルの網目を作れるようになっています。
Gridでは、スペースを行と列で定義し、各セルをほぼ完全な柔軟性で調整できます。親要素が子要素のために土台を用意し、子要素はスタイルを適用することで恩恵を受けられます。スタイルは状況に応じて、すでに定義された表の中で指定されたセルを占めるように子要素を配置します。これにより、flexではデザインの寸法に合わせるのがはるかに複雑になるような寸法や位置に、レイアウトを合わせる必要がありません。特に、上下の要素と高さや幅が衝突する要素や、親の「div」の子要素で、flexboxでは適用が難しくなる、より具体的な寸法を必要とするものの場合に有効です。
ここで、述べたことを具体例で示すのがよいでしょう。5つの要素からなる基本テンプレートを2通りの方法で表現してみます。1つ目はflexbox、2つ目はGridです。その後、コードと、一方の選択肢が他方より優れる点について説明します。
FLEXBOXの場合
See the Pen cssGrid vs Flexbox (Flexbox basic page structure) by Keruanima (@keruanima) on CodePen.
GRIDの場合
See the Pen cssGrid vs Flexbox (Grid basic page structure) by Keruanima (@keruanima) on CodePen.
では flexbox 作るときの レスポンシブ より多くのクラスを考慮する必要があります。具体的には media query しかし Gridでは要素の親だけに限定できます。 なぜなら、そのプロパティを使うと、 grid-area CSS内で要素をより視覚的に配置できるだけでなく、修正が簡単な単一のクラスで行えます。
Gridを使えば、レスポンシブデザインをさらに簡素化できます。
gridの概念、そのスタイルとプロパティを理解すれば、flexではより困難な、柔軟性・機敏さ・経済性を備えたウェブサイトを作ることができます。また、flexboxでは複雑になる「制限」や状況も存在します。たとえば、右側のサイドバーの幅をより小さくしたい場合、gridで作った例ではCSSコードを1行追加するだけですが、flexboxを使った例では、要素が全体のスペースに無理やり適応しようとするため、もう少し複雑になります。
結論として、Gridは新しいトレンドであり、Flexboxは依然として非常に有用ですが、一人前のデザイナーなら誰でも、その利点からCSS Gridに適応するだろうと確信しています。
