CSS グリッドがブートストラップよりもレイアウトの作成に適している理由についての簡単な説明

CSS グリッドがブートストラップよりもレイアウトに適しているのはなぜですか?この記事ではその理由を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

CSS Grid は、レイアウトを作成するまったく新しい方法です。これは史上初の適切なレイアウト システムであり、ブラウザーにネイティブです。はい、彼は私たちに多くの恩恵をもたらしてくれました。

今日最も人気のある Bootstrap フレームワークと比較すると、グリッドの利点が特に明確になります。JavaScript の導入なしでは以前は実現できなかったレイアウトやコードを作成できるだけでなく、保守と理解が容易になります。

#[関連する推奨事項: 「css ビデオ チュートリアル #」「ブートストラップ チュートリアル##」 #》】この記事ではその理由を説明します。

タグはより簡潔になります

Bootstrap

と比較すると、グリッドを使用すると HTML がきれいになりますが、これは最も重要な利点ではありません。しかし、それはあなたが最初に気づくことかもしれません。 説明のために、両方のバージョンに必要なコードを比較できるようにレイアウトを作成しました。

注: 与えられた例は少しスタイルを変更しましたが、比較の

Bootstrap

とは何の関係もないので、CSS のみを保持します。レイアウト部分の

Bootstrapまず、

Bootstrap

を作成する必要があるタグを確認します。

ここで 2 つの点に注意してください:

各行には

タグが必要ですレイアウトを指定するためにクラス名を使用しました (

col-xs-2

)

このレイアウトが複雑になるにつれて、HTML もこのように複雑になります。

これがレスポンシブ Web サイトの場合は、より複雑に見えます:




次に、グリッド レイアウトの使用を見てみましょう:

ここではセマンティック要素を使用できますが、

Bootstrap

と対比するために div を使用します。 明らかに、グリッド レイアウトはよりシンプルに見えます。見苦しいクラス名と各行に必要な追加の div タグはなくなりました。コンテナーとその中にあるアイテムだけです。

Bootstrap

とは異なり、レイアウトの複雑さが増加しても、Grid レイアウト タグの複雑さはそれほど増加しません。

Bootstrap

この例では CSS を追加する必要はなく、引用するだけです。

CSS Grid は必ず追加する必要があります。具体的には、次のようになります。


これは、Bootstrap

を支持する人もいるかもしれません。そうする必要はありません。 CSS を重視し、HTML でレイアウトを定義します。ただし、ご存知のとおり、柔軟性に関しては、ラベルとレイアウトの結合が大きな問題になる可能性があります。

より柔軟な画面サイズに基づいてレイアウトを変更するとします。たとえば、モバイル デバイスでメニューを表示するには、メニューを一番上の行に引き出します。

つまり、レイアウトは

# から

# に変わります。 # #CSS Grid

CSS Grid の使用は非常に簡単です。

メディア クエリ

を追加するだけで、好みのレイアウトになります。魔法が欲しい。

このように、HTML タグの記述順を気にせずにレイアウトを変更できるのは、開発者やデザイナーにとって大きなメリットです。



BootStrap

同じことを Bootstrap で実行したい場合は、HTML を変更する必要があります。タグの順序を調整します。



この要件には、メディア クエリを使用するだけでは十分ではなく、JavaScript も使用する必要があります。

この例は、私が経験したグリッドの最大の利点です

12 列に制限されなくなりました

これは大きな問題ではありませんが、Bootstrap のグリッド システムは 12 列に分割されているため、この問題に何度も悩まされました。5 列のレイアウトが必要な場合は混乱するでしょう。7 列の場合は混乱するでしょう。 、9 列 12 列に結合されない列。

CSS グリッド制限はありません。グリッドを希望の数に正確に作成できます。これは 7 列のグリッドです:



次のように grid-template-columns:repeat(7, 1fr) を設定することで実現されます:



ブラウザ サポート

もちろん、ブラウザ サポートについても議論する必要があります。この記事の執筆時点では、世界中の Web サイト トラフィックの 75% がブラウザ サポートをサポートしています。サポートCSS Grid



CSS Grid は、タグの順序を乱さずにドキュメントのレイアウトを変更できるレイアウト モジュールです。言い換えれば、CSS グリッドは純粋に視覚的なツールであり、適切に使用されれば、ドキュメントのコンテンツの表現に影響を与えることはありません。したがって、古いブラウザで CSS グリッドがサポートされていないことは、訪問者のエクスペリエンスに影響を与えるのではなく、エクスペリエンスが異なるだけです。

元のアドレス: https://hackernoon.com/how-css-grid-beats-bootstrap-85d5881cf163

プログラミング関連の知識の詳細については、以下を参照してください。 プログラミングビデオ! ！

以上がCSS グリッドがブートストラップよりもレイアウトの作成に適している理由についての簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。