CSS グリッドレイアウトの完全ガイド

Grid は 2 次元のグリッド レイアウト システムです。これを使用すると、本質的にはハック メソッドであるfloat 、 inline-block 、 positionを使用せずに、複雑なレイアウトを簡単に実装できます。

CSS グリッド レイアウトは、ページを複数のメイン領域に分割し、これらの領域のサイズ、位置、階層、その他の関係を定義するのに適しています (HTML がこれらの領域を生成する場合)。

テーブルと同様に、グリッド レイアウトを使用すると、要素を行または列に配置できます。 ただし、レイアウトに関しては、テーブルよりもグリッドの方が実行しやすいか簡単です。

グリッドレイアウトの概念

学習する前に、グリッドの次の概念を理解する必要があります。

グリッドトラック

グリッド トラックは、2 つのグリッド ライン間のスペースです。これらはgrid-template-columnsプロパティとgrid-template-rowsプロパティを使用してグリッド内で定義されます。

上の図には 2 行 3 列があります。行または列はトラックと呼ばれます。

グリッド線

Gridレイアウトを使用して明示的なグリッド内のトラックを定義すると、グリッド ラインも作成されます。

グリッド線は番号で指定できます。左から右に書く言語では、列線1グリッドの左側にあり、行線1グリッドの上部にあります。行番号はドキュメントの記述モードに従うため、右から左に記述する言語では、列線1目はグリッドの右側になります。下の画像は、言語が左から右であると仮定して、このグリッドの行番号を示しています。

グリッドセル

Gridレイアウトでは、グリッド セルは CSS グリッドの最小単位です。これは、表のセルのように、4 つのグリッド線の間のスペースです。

グリッドエリア

グリッド領域は、1 つ以上のグリッド セルで構成されるグリッド内の長方形領域です。本質的には、グリッド領域は長方形でなければなりません。たとえば、T 字型または L 字型のグリッド領域を作成することはできません。

雨どい

グリッドガターはグリッドトラック間の間隔であり、 grid-column-gapとgrid-row-gapを使用してグリッドレイアウトで作成できます。

グリッドレイアウトの使用

flex と同様に、グリッド レイアウトを使用するには、まずコンテナーが必要です。要素のdisplay gridに設定することで、グリッド コンテナーを取得できます。コンテナーの子はグリッド アイテムであり、 tableのtdに似ていますが、より柔軟性があります。

float 、 clear 、 vertical-align要素はグリッド コンテナーには影響しません。

コンテナのプロパティ

グリッドテンプレート

グリッド コンテナーを作成したら、グリッドの行と列の数、および各行と列のサイズを定義できます。

グリッドテンプレート行

グリッドの行数を明示的に定義するには、 grid-template-rowsを使用します。次の値を取ることができます。

noneキーワードはあいまいなグリッドを示します。すべての行とそのサイズはgrid-auto-rows暗黙的に指定されます。

非負值的長度大小: px, em, vwなど。

百分比: グリッドコンテナに対する相対値。inline inline-gridの場合、パーセンテージ値はautoとして扱われます。

flex : 単位frを使用してグリッド トラック サイズの弾性係数を定義する、負でない値。 flexが定義された各グリッドトラックは、残りの利用可能なスペースに比例して割り当てられます。

max-contentキーワードは、グリッド項目の最大コンテンツがグリッド トラックを占有することを示します。

min-contentキーワードは、グリッド トラックがグリッド項目の最大コンテンツと最小コンテンツによって占有されることを示します。

autoグリッドトラックが最大サイズの場合はmax-contentに相当し、最小サイズの場合はmin-contentに相当します。

グリッドテンプレート列

これはgrid-template-rowsに似ており、一方はグリッド行を設定し、もう一方はグリッド列を設定します。

。容器 {
    表示: グリッド;
    グリッドテンプレートの列: 40px 50px 自動 50px 40px;
    グリッドテンプレート行: 25% 100px 自動;
} 

。容器 {
  表示: グリッド;
  グリッドテンプレートの列: 1fr 1fr 1fr;
  グリッドテンプレートの行: 100px 100px;
} 

グリッドで利用可能な機能

グリッドレイアウトでは、次の3つの機能も使用できます。

繰り返す（）

repeat関数を使用すると、長い繰り返し表現をより簡潔に表現できます。

たとえば、上記のgrid-template-columns: 1fr 1fr 1fr;ではrepeat(3, 1fr)と記述できます。最初のパラメータは繰り返し回数で、 auto-fillまたはauto-fitにすることができます。

auto-fill

コンテナーに明示的なサイズまたは最大サイズがある場合、繰り返し回数は、グリッドがグリッド コンテナーをオーバーフローしない最大の正の整数になります。繰り返し回数がオーバーフローする場合は、繰り返し回数は 1 になります。

auto-fit

グリッド項目が配置された後、空の繰り返しトラックが折りたたまれる点を除いて、 auto-fillと同じ動作です。

＃容器 {
  表示: グリッド;
  グリッドテンプレートの列: repeat(2, 50px 1fr) 100px;
  グリッドギャップ: 5px;
  ボックスのサイズ: 境界線ボックス;
  高さ: 200px;
  幅: 100%;
  背景色: #8cffa0;
  パディング: 10px;
}

#コンテナ > div {
  背景色: #8ca0ff;
  パディング: 5px;
} 

最小最大()

長さと幅の範囲を持つ閉じた間隔を定義します。最小値と最大値の 2 つのパラメータを受け入れます。この間隔内の値を返します。

たとえば、 minmax(max-content, 300px)の場合、最大値は300pxを超えることはできません。

minmax(200px, 1fr) 200px未満にすることはできません

コンテンツに合わせる()

これはmin(maximum size, max(minimum size, argument))と同等です。パラメータには長さの値とパーセンテージを指定できます。

コンテンツとパラメータの最小値から最大値を取得し、次にコンテンツの最大値から最小値を取得します。

つまり、コンテンツが小さい場合はコンテンツの長さを取ります。コンテンツが大きく、コンテンツの長さがパラメータの長さより大きい場合は、パラメータの長さを取ります。

グリッドテンプレート領域

この属性グリッド ブロックはgrid-areaと一緒に使用する必要があり、その値はnoneまたは字符串にすることができます。

文字列の場合、指定された各文字列によって行が生成され、文字列内のスペースで区切られた各セルによって列が生成されます。隣接する行または列にまたがる同じ名前の複数のセルは、グリッド領域と呼ばれます。長方形以外のグリッド ブロックは無効です。

#ページ {
  表示: グリッド;
  幅: 100%;
  高さ: 250px;
  グリッド テンプレート領域: "head head"
                       「ナビメイン」
                       「ナビフット」;
  グリッドテンプレート行: 50px 1fr 30px;
  グリッドテンプレート列: 150px 1fr;
}

#ページ > ヘッダー {
  グリッドエリア: ヘッド;
  背景色: #8ca0ff;
}

#ページ > ナビゲーション {
  グリッドエリア: nav;
  背景色: #ffa08c;
}

#ページ > メイン {
  グリッドエリア: メイン;
  背景色: #ffff64;
}

#ページ > フッター {
  グリッドエリア: フィート;
  背景色: #8cffa0;
} 

grid-template-areas文字列は、グリッド項目のgrid-areaに関連付けられており、領域を定義するために使用します。

グリッドテンプレート

これは、 grid-template-rows 、 grid-template-columns 、 grid-template-areasの略語です。

その価値は3つのケースに分けられます。

• none
• rows/columns構文は、 grid-template: 100px 1fr / 50px 1fr;のように行と列を定義する場合にのみ使用できます。
• 3 つすべてが存在する場合、それらは/で区切られ、右側はcolumnsのままですが、左側の構文は<line-names>? <string> <track-size>? <line-names>?になります。

.ページ {
    グリッドテンプレート: [ヘッダー上部] "aa a" [ヘッダー下部]
                   [メイントップ] "bb b" 1fr [メインボトム]
                   / 自動 1fr 自動;
}
/*
line-names はオプションで、カスタム名であり、括弧で囲む必要があります。これは実際にはコメント文字列 grid-area の関連値 track-size と同等であり、この行のサイズです */

#ページ {
  表示: グリッド;
  幅: 100%;
  高さ: 200px;
  グリッドテンプレート: [ヘッダー左] "head head" 30px [ヘッダー右]
                 [メイン左] 「ナビメイン」 1fr [メイン右]
                 [フッター左] 「ナビゲーション フッター」 30 ピクセル [フッター右]
                 / 120ピクセル 1fr;
}

ヘッダー {
  背景色: ライム;
  グリッドエリア: ヘッド;
}

ナビゲーション{
  背景色: 水色;
  グリッドエリア: nav;
}

主要 {
  背景色: 黄色;
  グリッドエリア: メイン;
}

フッター {
  背景色: 赤;
  グリッド列: フィート;
} 

グリッド行ギャップ / 行ギャップ

行要素間のガター サイズを設定するために使用されます。値は長さ、パーセンテージ、またはnormalかになります。

CSS グリッド レイアウトは、もともと grid-row-gap プロパティを使用して定義されていましたが、現在は row-gap に置き換えられています。ただし、row-gap プロパティをサポートしていないブラウザとの互換性を保つには、プレフィックス付きのプロパティを使用する必要があります。

。箱{
    グリッド行間隔: 1em;
} 

グリッド列ギャップ / 列ギャップ

要素列間のガター サイズを設定するために使用されます。値は長さ、パーセンテージ、またはnormalかになります。

複数列レイアウトのnormalのデフォルトの間隔は 1em で、他の種類のレイアウトのデフォルトの間隔は 0 です。

grid-row-gapと同様に、これも徐々にcolumn-gapに置き換えられています。

.ページ {
    グリッド列の間隔: 1em;
} 

グリッドギャップ / ギャップ

これは上記 2 つのプロパティの省略形であり、構文はrow-gap column-gapです。 column-gapが指定されていない場合は、 row-gapと同じ値に設定されます。

これも徐々にgapに置き換えられていきました。

#グリッド{
  表示: グリッド;
  高さ: 200px;
  グリッドテンプレート: repeat(3, 1fr) / repeat(3, 1fr);
  ギャップ: 20px 5px;
}

#グリッド > div {
  背景色: ライム;
} 

暗黙的に作成された行と列

CSS グリッドは、周囲の項目のサイズとスパンに基づいて、グリッド上の各項目の位置を自動的に調整します。

例えば：

。箱 {
  表示: グリッド;
  グリッドテンプレート: 25px / 100px 160px;
  背景: #000;
}
。箱 * {
  背景: #ccc;
}
.box *:n番目の子(偶数) {
  背景: #777;
} 

1 行と 2 列のみ定義しました。しかし、子要素は 5 つあります。 CSS グリッドは、暗黙的に作成されたスペースにそれらを拡張することを決定し、新しく作成された暗黙的な行の列は、以前に指定されたgrid-template-rowsプロパティから行の高さを自動的に継承します。

グリッド アイテムには、 grid-column-start 、 grid-column-end 、 grid-row-start 、 grid-row-end 4 つのプロパティがあります。これらは、グリッド アイテムの位置を定義できます。定義したグリッドを超えて位置を設定すると、その時点で行または列が暗黙的に作成されます。

グリッド自動行

暗黙的に作成される行のサイズを指定します。その値は次のとおりです。

• 長度值: px em vmaxなど
• 百分比: グリッドコンテナに対する相対値
• flex : 単位frを使用してグリッド トラック サイズの弾性係数を定義する、負でない値。 flexが定義された各グリッドトラックは、残りの利用可能なスペースに比例して割り当てられます。
• max-contentキーワードは、グリッド項目の最大コンテンツがグリッド トラックを占有することを示します。
• min-contentキーワードは、グリッド トラックがグリッド項目の最大コンテンツと最小コンテンツによって占有されることを示します。
• autoグリッドトラックが最大サイズの場合はmax-contentに相当し、最小サイズの場合はmin-contentに相当します。

その値はgrid-template-rowsと同じです。

。箱 {
  表示: グリッド;
  グリッドテンプレート: 25px / 100px 160px;
  ギャップ: 10px 20px;
  グリッド自動行: 50px;
  背景: #000;
}
。箱 * {
  背景: #ccc;
}
.box *:n番目の子(偶数) {
  背景: #777;
} 

グリッド自動列

暗黙的に作成されたグリッドの列幅を指定します。その値はgrid-auto-rowsと同じです。

#グリッド{
  高さ: 100px;
  表示: グリッド;
  グリッドテンプレート領域: "a a";
  グリッドギャップ: 10px;
  グリッド自動列: 200px;
}

#グリッド > div {
  背景色: ライム;
} 

グリッド自動フロー

自動レイアウト アルゴリズムの動作を制御し、自動的にレイアウトされる要素がグリッド内でどのように配置されるかを正確に指定します。

1 つのdivに複数のdivを記述し、親にdisplay: grid;を設定すると、視覚的な観点からは変化がないことがわかります。しかし、親divにgrid-auto-flow: column;を追加すると、子要素が 1 行に表示されるようになります。これは、フレキシブル ボックスの効果に似ています。

grid-auto-flowの値は次のとおりです。

• row は、自動レイアウト アルゴリズムが各行を埋めて要素を配置し、必要に応じて新しい行を追加することを指定します。 (デフォルト値)
• column は、自動レイアウト アルゴリズムが各列を 1 つずつ埋めて要素を配置し、必要に応じて新しい列を追加することを指定します。

これら 2 つのキーワードの後に​​、 denseキーワードを追加することもできます。構文は[ row | column ] || denseです。

このキーワードは、自動レイアウト アルゴリズムが「高密度」パッキング アルゴリズムを使用することを指定します。このアルゴリズムは、グリッド内の小さな要素によって残されたギャップを埋めようとします。これにより、大きな要素によって残されたギャップが埋められますが、元の表示順序が乱れる可能性もあります。

省略すると、「スパース」アルゴリズムが使用され、レイアウト アルゴリズムはグリッドに要素をレイアウトするときに「前方」にのみ移動し、ギャップを埋めるために後戻りすることはありません。これにより、後続の要素によって埋められるギャップが残る場合でも、すべての自動レイアウト要素が「順番どおり」に表示されるようになります。

grid-auto-flow: row;

grid-auto-flow: row dense;

グリッド

grid 、上記のほぼすべてのプロパティ ( gapを除く) を含む CSS ショートハンド プロパティです。

他のショートハンド プロパティと同様に、サブプロパティのいずれかが宣言されていない場合は、その初期値が使用されます。さらに、この省略宣言ではグリッドのガターは設定されませんが、この宣言によってガターがリセットされます。

その価値は3つのカテゴリーに分けられます

grid-template

これは、 grid: [linename1] "a" 100px [linename2];などのgrid-templateの省略形と同じです。

grid-template-rows / [ auto-flow && dense? ] grid-auto-columns?

grid-template-rowsの高さを設定し ( grid-template-columnsはnoneに設定)、 /の後のauto-flowを記述する必要があります ( grid-auto-flowはcolumnに設定)、最後にgrid-auto-columns列トラックを自動的に繰り返す方法を指定します ( grid-auto-rowsプロパティはautoに設定)。

たとえば、 grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;

[ auto-flow && dense? ] grid-auto-rows? / grid-template-columns

この書き方は前の方法と逆です。この方法ではgrid-template-columns ( rows属性はnone ) を設定します。オプションでgrid-auto-rowsプロパティを設定します（ columns autoです）

grid: auto-flow dense / 30%;

グリッド項目のプロパティ

グリッド行開始、グリッド行終了、グリッド列開始、グリッド列終了

グリッド内のグリッド項目の行開始位置、行終了位置、列開始位置、列終了位置をそれぞれ指定します。

これには、前に紹介したグリッド線の概念を理解する必要があります。水平線 (行) は上から下に向かって増加し、垂直線 (列) は左から右に向かって増加し、どちらも 1 から始まります。

以下の値を取ることができます。

auto自動配置、自動スパン、またはデフォルトのspanが 1 であることを意味します數字グリッド ラインspan 數字スパンされるグリッドの数を表します。0 0の數字は無効です。グリッド サイズを超えると、行または列が暗黙的に作成されます。

これはtableに似ています

指定されたサイズを超えて位置を設定すると、不安定な結果になるので避けてください。

。箱 {
  表示: グリッド;
  グリッド: 100px 100px / 100px 100px;
  背景: #000;
}
。箱 * {
  背景: #ccc;
}
.box *:n番目の子(偶数) {
  背景: #777;
}
.box1 {
  グリッド列の開始: スパン 5;
} 

グリッド行、グリッド列

grid-rowとgrid-column 、上記の 4 つのプロパティの略語です。

値の構文はstart / endです。値が 1 つしかない場合はstart 、 end値はデフォルトのautoになります。

列数が不明な場合は、 -1を使用してグリッドの端まで拡張できます。

負の値の使用

グリッドエリア

上記ではgrid-areaとgrid-template-areasを組み合わせた使用方法を示しました。 grid-area 、実際にはgrid-row-start 、 grid-column-start 、 grid-row-end 、 grid-column-endの略語です。

デフォルト値はgrid-area: auto;です。

4つの値が設定されている場合、順序は次のようになります。

grid-area: row-start / column-start / row-end / column-end;

3つの値が設定されている場合、最後の値はautoです

2つの値が設定されている場合、最後の2つはautoです

1つの値を設定すると、次の3つはauto設定されます。

最初の項目が自定義表示である場合、無視されるすべての項目はカスタム表現になります。

.box1 {
  グリッドエリア: a / a;
}

/* 同等 */

.box1 {
    グリッド行開始: a;
    グリッド列の開始: a;
    グリッド行の終了: a;
    グリッド列の終了: a;
}

グリッド項目のコンテンツ配置

align-selfとjustify-selfを使用して、グリッド項目のコンテンツの配置を調整できます。

align-self垂直方向の配置に使用され、 justify-self水平方向の配置に使用されます。

整列-自己

Flex レイアウトでもこのプロパティを使用できます。一般的に、次の 3 つの値が使用されます。

1. 開始: コンテンツは上揃えになります
2. center: コンテンツは垂直方向に中央に配置されます
3. end: コンテンツは下揃え

自分を正当化する

一般的に、次の 3 つの値が使用されます。

• start / left : コンテンツは左揃えになります
• cneter : コンテンツを水平方向に中央揃えする
• end / right : コンテンツは右揃えになります

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。