CSS3 グリッド レイアウトの基礎知識

Grid-template 属性とその一般的な表記法 (手書き) は、明示的なグリッドを形成する固定数のトラックを定義します。

グリッド項目がこれらの境界の外側に配置されている場合、グリッド コンテナーは暗黙的なグリッド ラインを追加することによって暗黙的なグリッド トラックを生成します。

これらの暗黙的グリッド線と明示的グリッド線が一緒になって暗黙的グリッドを形成します。

暗黙的なグリッド トラックのサイズは、grid-auto-rows プロパティと Grid-auto-columns プロパティによって決まります。

grid-auto-flow 属性は、明示的な位置を指定せずにグリッド項目の自動配置を制御するために使用されます。

明示的なグリッドが埋められると (または明示的な位置グリッドがない場合)、自動配置も行われます。その結果、暗黙的なグリッド トラックが生成されます。

行と列のディメンションを自動的に生成: Grid-auto-rows プロパティと Grid-auto-columns プロパティ

ディメンションを明示的に定義せずにグリッド項目を行または列に配置すると、暗黙的にグリッド トラックがそれに対応するように作成されます。

これは 2 つの状況で発生する可能性があります。範囲外の行または列に明示的に配置する場合と、自動配置アルゴリズムによって追加の行または列を作成する場合です。

グリッド自動列プロパティとグリッド自動行プロパティは、そのような暗黙的に作成されるトラックのサイズを指定するために使用されます。

私たちは例を通してこのプロパティの使用法をまだ学んでいます:

#grid {    display: grid;    grid-template-columns: 20px;    grid-template-rows: 20px }  #A { grid-column: 1;          grid-row: 1; }  #B { grid-column: 5;          grid-row: 1 / span 2; }  #C { grid-column: 1 / span 2; grid-row: 2; }

<div id="grid">  <div id="A">A</div>  <div id="B">B</div>  <div id="C">C</div>
</div>

グリッド項目が未定義の次元の行または列に配置される場合、それに対応する暗黙的なグリッド トラックが作成されます。

これは 2 つの状況で発生する可能性があります。範囲外の行または列に明示的に配置する場合と、自動配置アルゴリズムによって追加の行または列を作成する場合です。

グリッド自動列プロパティとグリッド自動行プロパティは、そのような暗黙的に作成されるトラックのサイズを指定するために使用されます。

上記の例は、暗黙的なグリッド トラックの使用を示しています。この例では、合計 2 行と 5 列が作成されますが、そのうち 1 行目と 1 列目のみが明示的に宣言されています。また、暗黙的に 1 つの行と 4 つの暗黙的な列があります。

グリッド項目 B はグリッド ライン 5 にあり、これにより 4 つの暗黙的なグリッド列が自動的に作成されますが、列 3 と 4 にはグリッド項目がないため、幅は 0 に縮小されます。

オンラインの例を通じて自分でテストできます。 (Chrome を使用して開いてください)

注: グリッド レイアウトは開発中の W3 仕様であるため、ブラウザは現時点ではまだ完全にサポートしていません。

自動レイアウト: Grid-auto-flow 属性

位置が明示的に指定されていないグリッド項目は、空間内の自動配置アルゴリズムを通じて、グリッド コンテナーの空いている領域に自動的に配置されます。

グリッド自動フローは、自動レイアウト アルゴリズムの動作を制御するために使用され、自動的にレイアウトされたグリッド項目をグリッドに配置する方法を指定します。

行
自動レイアウト アルゴリズムは、グリッド項目を各行に順番に埋め、必要に応じて新しい行を追加します。これは、grid-auto-flow のデフォルト値です。
列
自動レイアウト アルゴリズムにより、グリッド項目が各列に順番に埋められ、必要に応じて新しい列が追加されます。
稠密
稠密が指定されている場合、「稠密」充填アルゴリズムが使用され、車のトランク内で行うのと同じように、「大きな」グリッドによって残されたギャップを後ろの小さなグリッド項目で埋めようとします。アイテムを詰めるのと同じこと。これにより、フィル順序とコード順序が異なる場合があります。
指定しない場合、「スパース」充填アルゴリズムが使用され、空白を埋めるために後戻りせずに順番に配置するだけです。これにより、すべてのグリッド項目が元のコード順序を維持するようになりますが、ページ スペースが無駄になる可能性があります。

同様に、私たちはオンラインの例を通して学びます。コードのコメントは明確に説明されているため、ここでは繰り返しません。

by iefreer