この記事では、CSS グリッド レイアウトに関するいくつかの知識ポイントを共有し、CSS グリッド レイアウトについてさらに学ぶことができます。お役に立てば幸いです。
今日、最新の Web レイアウトに使用できる機能が多数あります。おそらく最もよく知られているのは Flexbox であり、Flexbox レイアウトは簡単に解決できると誰もが考えています。 。 Flexbox レイアウトは非常に強力ですが、依然として 1 次元レイアウトであり、一部の 2 次元レイアウト シナリオでは依然として大きな制限があります。これは、CSS グリッドが現代の Web レイアウトや将来のレイアウト ソリューションにおいて依然として不可欠であり、現時点では 2 次元レイアウトをサポートする唯一のテクノロジーであることを側面から示しています。 2021 年、私は数か月かけて CSS グリッドに関連するすべてを見直し、20 以上の記事を通して CSS グリッドについて説明しました。このシリーズは、インターネット全体で最も体系的な CSS Grid の入門書であると言えます。まだ CSS グリッドに触れたことがない場合、または CSS グリッドに対してある程度の恐怖心を抱いている場合は、このシリーズを読んでみる価値があります。
どの機能モジュールにも独自の専門用語があり、CSS グリッドも例外ではありません。 CSS Grid の技術用語はより広い範囲をカバーしていることがわかります。この記事では、グリッド軸、グリッドコンテナ、グリッドアイテム、グリッドライン、グリッドセル、グリッドトラック、グリッドエリア、明示的グリッド、暗黙的グリッド、グリッド間隔（グリッドスロット）など、CSSグリッドに関連する用語について詳しく説明します。サブグリッドやネストされたグリッドなど。
CSS グリッド レイアウトに関連する技術用語をある程度理解したら、次の作業を開始できます。 real CSS グリッドで使用できるプロパティについて説明します。このセクションでは、グリッド コンテナーに使用できるプロパティと、グリッド コンテナーとグリッド アイテムのサイズの設定について主に説明します。この目的のために、grid-template-columns、grid-template-rows、grid-template-area などのプロパティを使用して明示的なグリッドを定義できます。
Grid-template-columns と Grid-template は CSS Grid -rows で明示的に使用できますグリッド トラックを明示的に定義する必要があります。ただし、このセクションでは主に、グリッド トラック サイズの設定に使用できる単位、特に CSS グリッド内の固有の単位 fr について説明します。
グリッド テンプレートの列とグリッド テンプレートの行に加えて、グリッド トラック サイズを長さ単位 (
CSS グリッド レイアウトでは、グリッド行、グリッド列、グリッド領域などのプロパティを使用できます。グリッド項目をグリッド内の指定された位置に明示的に配置します。さらに、CSS グリッド レイアウト仕様には、明示的に指定されていないグリッド項目をどのように配置するかについての別のルール セットも含まれています。つまり、grid-auto-flow を使用して自動グリッド配置を設定します。
CSS グリッド システムでは、グリッド ラインは非常に重要な概念です。デフォルトでは、グリッド システムが定義されるたびに、数値のグリッド ライン名 (行グリッド ライン名と列グリッド ライン名) が作成されます。さらに、grid-template-columns および Grid-template-rows の角括弧 [] でグリッド線の名前を明示的に指定することもできます。前述したように、CSS グリッド システムは明示的グリッドと暗黙的グリッドに分けられ、同様にグリッド ラインも明示的グリッド ラインと明示的グリッド上に配置される暗黙的グリッド ラインに分割されます。グリッド線は明示的グリッド ラインと呼ばれます。暗黙的グリッド上にあるグリッド線は暗黙的グリッド線と呼ばれます。そして、グリッドシステムにおいて、グリッドアイテムを明確に配置するためにはグリッド線が不可欠であり、言い換えれば、グリッド線の名前はグリッドアイテムの配置に直接影響します。この記事では、主にグリッド線に名前を付ける方法について説明します。ご興味がございましたら、読み続けてください。
グリッド ラインは、グリッド レイアウト システムにおいて非常に重要です。前のコンテンツでは、グリッド レイアウト システムのグリッド ラインに関する関連知識については詳しく説明していませんが、グリッド テンプレートの列、グリッド テンプレートの行、グリッド テンプレートの領域、グリッド テンプレートなどのプロパティを見つけるのは難しくありません。 auto-columns、grid-auto-rows、grid-auto-flow はグリッド ラインを作成し、グリッド項目の Grid-columns、grid-row、grid-area はグリッド ラインを介してグリッドを配置できます。レイアウト システムを作成する際の可能性が広がります。このセクションでは、CSS グリッド レイアウトでグリッドに名前を付けるさまざまな方法と、そこから生じる興味深い可能性のいくつかを詳しく見ていきます。
グリッド項目を CSS グリッドに自動的に配置することに加えて (通常は Grid-auto-rows を使用します)、 Grid-Auto-columns と Grid-Auto-flow に加えて)、grid-row、grid-columns、grid-area を明示的に使用して、グリッド アイテムにグリッド ライン名を設定し、グリッド アイテムを明示的に配置することもできます。
CSS グリッド レイアウトでは、さまざまな方法でグリッド項目を配置できます。明示的に配置します。指定された場所にあります。例:
グリッド項目では、グリッド行、グリッド列、グリッド領域のプロパティを使用できます「グリッド項目の位置」などでは、グリッド ライン名に基づいてグリッド項目の位置を明示的に指定します。これにより、グリッド項目が互いに重なることが可能になります。つまり、CSS グリッドでは、次のメソッドを使用してグリッド項目を互いに重ねることができます。
さらに興味深いことに、CSS グリッド アイテムは位置を明示的に非の位置に設定する必要があります。静的な値を使用して、z-index を有効にします。つまり、グリッド項目が重なっている場合、グリッド項目に直接 z-index を明示的に設定して、グリッド項目の z 軸を制御できます。
Flexbox レイアウトの配置に慣れている場合は、CSS グリッドの配置を次に示します。マスターするのは簡単です。 Flexbox に非常に似ているため、両方とも CSS Box Alignment Module Level 3 仕様の機能を使用します。この章では、グリッド レイアウトにおけるグリッド アイテムとグリッド トラックの配置について詳しく説明し、さらに、配置とマージンの関係 (マージンを使用してグリッド アイテムの配置を設定する方法) についても紹介します。
さらに、記事の最後では、gap 属性、つまり、gap を使用してグリッド トラック間の間隔 (一般にグリッド スロットのサイズとして知られる) を設定する方法についても紹介します。
この章では、主にグリッド プロジェクトの幅と高さの比率について説明します。高比率の設定、つまりグリッド内の CSS の aspect-ratio 属性の適用。さらに、padding-top またはpadding-bottom、CSS カスタム プロパティ、グリッド項目のアスペクト比を実装する calc() 関数も導入されています。
この記事では、主に CSS のロジックについて説明します。グリッド レイアウトのプロパティ および CSS 書き込みモード 。例えば、グリッドアイテムの自動配置と書き込みモードの関係、グリッド線に基づくグリッドアイテムの配置と書き込みモードの関係、グリッド領域と書き込みモードの関係などです。
しばらくの間、サブグリッドの使用方法とその方法について多くの議論が行われてきました。この問題については多くの議論があり、その必要性についても議論がありました。多くの議論は、サブグリッドと同じ問題の多くに対処する他の 2 つの方法、ネストされたグリッドと表示: コンテンツを中心に行われてきました。この記事では、ネストされたグリッドをエントリ ポイントとして使用し、ネストされたグリッドとサブグリッドについて詳しく説明します。つまり、サブグリッドとネストされたグリッドの類似点と相違点を理解します。また、サブグリッドが本当に必要な非常に効率的なケースもあれば、厳密には必要ではないがよりクリーンなソリューションにつながるケースもあると述べています。
subgrid CSS グリッド レイアウト モジュール、ネストされたグリッド、サブグリッドのレベル 2 仕様に入る前display:contents については徹底的な議論が行われ、最終的にサブグリッドはより多くのサポートを受け、最終的には仕様の一部となりました。つまり、ネストされたグリッドと表示: コンテンツの両方でサブグリッドのようなレイアウトを実現できます。この章では、display:contents と subgrid の違いについて説明します。
ブラウザでは複数列レイアウト、フレックスボックス レイアウト、グリッド レイアウトがサポートされているため、これらの機能を使用してウォーターフォールを実現できます。しかし、これらのテクノロジーによって実装されたウォーターフォール フロー レイアウトには、多かれ少なかれ特定の欠陥があります。ただし、ありがたいことに、CSS グリッド レイアウト モジュール レベル 3 では、真のウォーターフォール フロー レイアウトが W3C 仕様に組み込まれており、真のウォーターフォール フロー レイアウトと呼ぶことができます。残念ながら、このドラフト仕様をサポートする主流ブラウザはあまりなく、Firefox と Firefox Nightly だけです。この機能はまだ運用環境で使用する準備ができていませんが、使用後の試用とフィードバックは、このレイアウトの要件を満たしていることを確認するのに役立ちます。
これまでの内容から、グリッド レイアウトの複雑さを見つけるのは難しくありません。 。 CSS Gridの登場により、Webにおけるレイアウトの設計方法も変わってきたことは皆さんもお気づきかと思います。紙の上にレイアウトをスケッチし、レイアウト設計が何であるかを考えることができます。コードを入力し始めるとき、レイアウトがどのように見えるかはすでにわかっています。 CSS グリッド レイアウトが複雑であることと、グリッド コンテナーで定義されたグリッドが非表示であるためです。このため、グリッドをより簡単に使用する方法や、グリッド レイアウト関連のバグをデバッグする方法を検討する必要があります。 Web 開発に精通している学生は、レイアウトや CSS 関連の問題をデバッグするときに、要素に境界線を追加することを好むことを知っています。グリッド レイアウトでは、同様の方法を使用してグリッド コンテナーやグリッド アイテムに境界線を追加して、すばやく配置することができますが、グリッド ラインに境界線を追加することはできません。幸いなことに、Chrome、Firefox、Safari、Microsoft Edge ブラウザー開発者ツール (DevTools) などの現在の主流ブラウザーはすべて、グリッド レイアウト インスペクターを提供しています。これらのツールを使用すると、グリッドを使用したり、グリッドの使用時に発生した問題をデバッグしたりするのにすぐに役立ちます。
CSS グリッド モジュールの登場とそれに対するブラウザ サポートにより、Web に優れた方法が提供されますレイアウト これまでにない可能性。より少ない要素 (より単純な HTML 構造) で、より複雑なデザインを構築できます。これは、私たちが常に非常に強力であると考えてきた Flexbox よりもはるかに強力です。しかし、CSS グリッドについて考えるとき、通常は私たちが慣れ親しんでいる正方形のレイアウトを思い浮かべますよね? @Andy Barefoot は、彼の個人 Web サイトと Codepen で多くの創造的なレスポンシブ レイアウト効果を提供しています。これにより、Web レイアウトに全く新しい感覚が与えられ、古典的な Web デザイン (通常の正方形レイアウト) に似た感覚が得られます。彼は CSS グリッド レイアウトを使用して、これを行う。
CSS グリッド レイアウトでは、グリッド項目を配置し、それぞれに異なる要素をオーバーラップさせることができますその他、CSS の Z インデックスを通じて Z 軸上のグリッド項目の積み重ね順序を制御します。つまり、CSS 位置の絶対配置を使用して実装されていたレイアウトを、CSS グリッドを使用して直接解決できるようになりました。この場合、主に CSS グリッドを使用して要素オーバーレイのレイアウト効果を実現する方法を見ていきます。
フルブリードは、印刷の世界ではフルブリードとして知られる概念です。つまり、印刷では、紙がトリミングされる外側の領域であるブリードが行われます。このため、印刷デザイナーはデザイン作業でにじみを考慮することに慣れています。これを行うには、安全ゾーンを設定します。近年では「フルブリード」と呼ばれるこの概念がWebのレイアウトにも応用されています。これは、幅の狭い列のテキストの端から端までの画像など、幅が制限された列で全幅の要素を使用するレイアウトです。コミュニティでは、このレイアウト効果を全幅レイアウトと呼ぶ人もいますし、エッジツーエッジ レイアウトと呼ぶ人もいます。正直に言うと、Web 上でこのレイアウト効果を実現するのは難しいことではありません。コミュニティには、このレイアウト効果を実現できるさまざまな技術ソリューションが多数あります。しかし今日は、別の角度から考えてみます。
このケースでは、CSS グリッドによって構築された別のグリッド レイアウト、つまりクロスを導入します。レイアウト。このケースは、CSS グリッドの関連プロパティが実際にどのように使用されるか (Web レイアウト) をさらに理解するのに役立ちます。
長い間、Web レイアウトでは正方形の長方形が使用されてきました。ユーザーに対する UI 効果、これは多くの Web 開発者の意識にも当てはまりますが、Web のレイアウトは長方形の配置の制限を打ち破ることはできません。しかし、Web技術の発展のスピードは凄まじく、日々新しいものが目の前に現れます。わずか数年の間に、Web レイアウトには非常に多くの新機能が登場しました。言い換えれば、今日デザイナーが「雑誌や新聞に似たレイアウトを作成しましょう」と言ったとします。あなたは喜んで「OK!」と言うでしょう! つまり、現在の新機能を使用すると、長方形のフレームの制限を打ち破り、Web 上で雑誌のようなレイアウトを実現できるようになります。
(学習ビデオ共有: css ビデオ チュートリアル)
以上が見逃せないCSSグリッドレイアウトの詳しい知識！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
