CSSグリッドの自動配置アルゴリズムのガイド

このチュートリアルは、

プロパティに基づいて要素を配置するCSSグリッドレイアウトモジュールの自動配置アルゴリズムを詳しく説明しています。 以前の記事ではCSSグリッドの基本がカバーされていましたが、これはアルゴリズム自体に焦点を当てており、要素が最終的な位置にある方法を説明しています。 grid-auto-flow

重要な概念：

（デフォルトの
• ）によって管理される自動配置アルゴリズム、グリッドアイテムの位置。 grid-auto-flow匿名のグリッド項目（グリッドコンテナ内の非スタイルのテキスト）を処理します。 明示的に配置された要素（rowを使用）が最初に配置されます。
• row位置が定義されているが未定義の列位置を持つ要素は、スパース（デフォルト）または密な梱包のいずれかを使用して次に配置されます。
アルゴリズムは、暗黙のグリッドの列カウントを決定し、特定の列位置または大きなスパンを持つアイテムに対応するために必要に応じて拡張します。
• 最後に、残りのアイテムは、暗黙のグリッドの上部左から始まる自動配置カーソルを使用して、grid-areaに従って配置されます。
• アルゴリズムの理解：
• 潜る前に、これらのコア概念を理解してください：grid-auto-flow

匿名のグリッドアイテム：タグに包まれていないグリッドコンテナ内のテキストは、匿名のグリッドアイテムになります。 直接スタイルすることはできませんが、親のスタイルを継承します。 Whitespaceは匿名のアイテムを作成しません

グリッドスパン：

指定がない限り、グリッドスパンはデフォルトで1（1つのセル）にスパンします。

暗黙的なグリッド：
• グリッドは、、および
で定義されています。 暗黙のグリッドは、これを超えて拡張して、その境界外に配置されたアイテムに対応します。
• 次の説明はを想定しています。
の場合、説明に「行」と「列」を交換します
• ステップ1：匿名グリッドアイテムの生成： grid-template-rows grid-template-columnsアルゴリズムは、グリッドコンテナ内の任意のテキストから匿名のグリッドアイテムを作成することから始まります。 これらはスタイルを維持できませんが、親のスタイルを継承します grid-template-areas
ステップ2：明示的に配置された要素の配置：

grid-auto-flow: rowを使用して明示的に定義された位置を持つgrid-auto-flow: column要素が最初に配置されます。アルゴリズムは、

ステップ3：列の設定された要素の配置、列の設定されていない位置：

次に、指定されたgrid-row-startおよびgrid-row-end（ただし列位置ではなく）を備えた要素が配置されます。 アルゴリズムは、スパースパッキングまたは高密度の梱包のいずれかを使用します：

• スパースパッキング（デフォルト）：要素は、既存のアイテムを重複させることなく、最も早い列に配置されます。 これは、このステップに配置されたアイテムのみを考慮します。

密集した梱包（
• ）：

  このステップに配置された同じ行に他のアイテムの前に配置することを意味する場合でも、要素は最も早い列に配置されています。> grid-auto-flow: row dense

（まばら）

（濃い）

ステップ4：暗黙的なグリッド列カウントの決定：

アルゴリズムは、暗黙のグリッドの列カウントを決定します：

は、明示的なグリッドの列数から始まります

列を追加して、定義された列位置を持つアイテムを収容します

残りのアイテムの中の最大の列スパンが現在の暗黙のグリッド幅を超える場合、列を追加します。
2. ステップ5：残りのアイテムの配置：
自動配置カーソル（最初は左上で）を使用して、残りのアイテムを配置します。 パッキングモード（スパースまたは密度）は配置に影響します：

スパースパッキング：

重複しない位置が見つかるまで、カーソルが列を横切って移動します。現在の行にスペースが見つからない場合、次の行に移動します。

• 密集したパッキング：カーソルは、各アイテムの暗黙のグリッドの最上部にリセットされ、利用可能な初期の非重複位置を見つけます。

• （まばら） （濃い）

結論：

この詳細なウォークスルーは、CSSグリッドの自動配置アルゴリズムを明確にします。さまざまなレイアウトを試して、理解を固めてください。 コアアルゴリズムの説明はすでに非常に包括的であるため、元のテキストのFAQセクションは簡潔に省略されています。

以上がCSSグリッドの自動配置アルゴリズムのガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。