CSS Grid Layoutと他のレイアウトシステムとの違いは何ですか？

Question

CSS FlexboxまたはCSS TablesなどのBootstrapまたは他のレイアウトなどのCSS Grid Layoutと既存のレイアウト機能のフレームワークとの違い（ない HTMLテーブルは、私は彼らがテーブルの内容のみに使用されることになっている知っている、）何ですか？

概念とはどのようなユースケースが対象ですか？

Answer 1

CSSのグリッドレイアウトは、TwitterのブートストラップでHTMLテーブル、フレックスボックス、およびグリッドを上書きしようとしていません。 CSSグリッドはマークアップを作成する新しい方法です。

グリッドレイアウトを作成する目的は、レイアウトをCSSで宣言することのみです。プレーンな子供のリストを持つコンテナがあれば、CSS経由でのみ2Dレイアウトを追加できます。 rowコンテナなどのアイテムをラップする必要はありません。しかし、それはグリッドの利点ではありません、時にはあなたの細胞がHTMLで行にラップする必要があります。

Twitterのブートストラップとテーブルは、同じ概念を持っています。HTMLで宣言されたいくつかの行とその子があります。それは欠点ではなく、それがどのように機能するかです。フレックスボックスの前には、他の方法がないために、これらの方法をもっと頻繁に使いました。

長年前（CSS前）には、フロントエンドでテーブルのみを使用しました。テーブルが悪いということではありません。これが唯一の方法でした。しかし、テーブルが本当に必要なときは、テーブルは良いです。あなたはすべてのためにそれらを使用すべきではありません。

フレックスボックスはすべて要素の約1D配置です。もちろん、2Dのように見える場合もあります。場合によっては、実際にグリッドが必要なので、いくつかのハッキングを使用する必要があります！しかし、フレックスボックスが正しく適用されているわけではなく、グリッドのブラウザが比較的低いためです。いくつかのレイアウトには最適ですが、実際には2D（テーブルやグリッドを使用する方が良い）が必要な場合は、ハッキリかもしれません。

グリッドレイアウトでエレガントにレイアウトされたグリッドレイアウトを使用してください。他のケースでは、それは維持可能でエレガントな方法ではありません。

Answer 2

CSSグリッドレイアウトでは、アイテムをレイアウトするための2次元グリッドを作成できます。応答性の高いユーザーインターフェイス設計を生成するために使用されます。

ブートストラップやCSS Flexboxなどのレイアウトシステムとの主な違いは、2次元であることです。ブートストラップとフレックスボックスのレイアウトでは、1次元で定義されています。つまり、CSSグリッドレイアウトでは、グリッド項目が表のように水平方向と垂直方向に整列します。 CSSテーブルとの違いは、グリッド内の要素のサイズと整列の点で柔軟性があり、項目が互いに重なることができることです。

他のシステムでも2Dエフェクトを実現できますが、ブートストラップのグリッドシステムは12列のレイアウトに基づいており、ブートストラップとフレックスボックスの両方で要素を一方向に並べると、その容器のサイズに合わない。

さらに、CSSグリッドレイアウトでは、DOM内での位置とは別に、異なる「グリッド領域」に含まれる要素を配置することができます。

グリッドレイアウトでは、implicit grids内に配置された項目のみが、使用可能なビューポートまたはコンテナのサイズに基づいて、フレックスボックスまたはブートストラップに似た要素をラップします。 explicit gridsに配置された要素はそのように再配置されませんが、これはメディアクエリと組み合わせて実現できます。

Answer 3

ブートストラップは巨大なフレームワークですが、この比較ではグリッドのみを参照していると仮定します。

私には、CSSのフレキシボックスとCSSグリッドの光る部分は、彼らは、デスクトップの世界では、グリッド・システムへのビット近いウェブの世界でグリッドシステムを持っていることである - それはより敏感かつ動的です。フレックスボックス/ CSSグリッドが可能にするのは、アイテム/カラム/行を記述して、コンテナのサイズに基づいてサイズを調整するだけでなく、お互いに応じてサイズを調整できることです。

たとえば、フレックスボックスでは、固定サイズ（100 px）、コンテナ（20％）を基準にしたサイズのアイテム、コンテンツに合わせたアイテム（auto）、すべてのアイテムあなたが望む割合で残りの空きスペースを共有するための他のアイテム。ウィンドウのサイズが変わると、すべての項目が自動的に調整されます。さらに、自動サイズ変更されたアイテムが変更された場合、他のアイテムもリフレッシュされた空き領域を吸収するように調整されます。これは、デスクトップアプリケーションのレイアウトがどのように機能するかです。

CSSグリッドは、フレックスボックスと同じ機能を持ちますが、グリッドであり、2つの次元で動作します。グリッドをシミュレートするために複数のフレックスボックスの行を使用しようとすると、各行の最初の項目のサイズを小さくする必要がありません。この場合、幅が狭くなりません（percantageまたはpx ）。 CSSグリッドはそれらを列としてサイズ設定することができます。そのため、列がどの行にあっても幅を最も広い項目に設定できます。

ブートストラップv3には、このような柔軟性はありません。その応答性は、コンテナおよびデバイスに応答することを意味し、列/行を互いに反応させることはできません。

ブートストラップv4は、フレックスボックスの上に構築されているため、柔軟性が大幅に強化されています。しかし、まだ、あなたは単に鳥のシステムについて話しているなら、私はCSSのグリッドとフレックスボックスのために行くと言うだろう。