グリッドプロパティとは

gridプロパティは、grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns、grid-auto-flow、grid-column-gapの簡略プロパティです、およびグリッド行ギャッププロパティ。

グリッド構造

Gridプロパティは、要素をマトリックスのように表示します⊞

 
 
 
 
 
 
 
 

CSSで

#container {
 ディスプレイ:グリッド。
 }

の例では、#containerはグリッドとして表示され、その子要素はグリッドセルまたはアイテムとして表示されます

ブラウザの互換性

IE、Edge、FirefoxがCSSグリッドプロパティsupportsをサポートしていることは大きな興奮です。ほとんどすべてのブラウザーには、開発者ツールの美しいグリッドビューUIがあります。

グリッド線

グリッド線は水平線と垂直線であり、位置決めに使用されます。ポジショニングインデックスは整数(負の整数と正の整数の両方)にすることができます。

プロパティ→grid-column-start、grid-column-end、grid-row-end、grid-row-end。

サンプルコード:

#grid> div:nth-​​child(2){
 grid-column-start:2;
 grid-column-end:3;
 grid-row-start:2;
 グリッド行端:3;
}

要素2は2水平線の2番目の垂直線で始まり、要素は3垂直線と3垂直線で終わります。

グリッド線

グリッドセル

グリッドセルは、2つの隣接する垂直グリッド線と2つの隣接する水平グリッド線の間のスペースです。

グリッドセル

グリッドトラック

グリッドトラックは、隣接する2つのグリッド線の間のスペースです。つまり、行、列。

グリッドトラック

グリッドエリアとグリッドギャップ

グリッド領域は、1つ以上のセルのグループです。

グリッドギャップは、行と列の間のスペースです。 grid-row-gapとgrid-column-gapの略記プロパティ。

グリッド行とグリッド列

grid-rowは、grid-row-startおよびgrid-row-endの短縮プロパティです。

grid-columnは、grid-column-startおよびgrid-column-endの簡略プロパティです

グリッド行

grid-row-start→行内のグリッド項目の開始位置を指定します

eg.grid-row-start:2→要素は2番目の垂直線から始まります

grid-row-end→グリッド項目の行内の終了位置を指定します

例:grid-row-end:3→要素は2番目の垂直線で終了します

グリッド自動フロー

自動配置アルゴリズムの動作を制御します。デフォルトでは、値はrowです(アイテムは行ごとに配置されます)

grid-auto-flow:row;
grid-auto-flow:column;
グリッド自動フロー列とグリッド自動フロー行

grid-auto-flow:row dense→「dense」パッキングアルゴリズムを使用します。行単位でグリッドの空きスペースを埋めます。

grid-auto-flow:column dense→「dense」パッキングアルゴリズムを使用します。列ベースでグリッドの空きスペースを埋めます

明示的グリッドと暗黙的グリッド

明示的なグリッドは、ユーザーがgrid-template-row、grid-template-columnsを使用して作成したグリッドです

grid-template-columns:repeat(3、100px);
grid-template-rows:100px 100px;

暗黙的なグリッドはブラウザによって作成されます。暗黙のグリッドのサイズは、grid-auto-columnsおよびgrid-auto-rowsプロパティを使用して変更できます。

grid-template-columns:repeat(3、100px);
grid-auto-rows:100px;

グリッド順序:

テンプレートエリアプロパティで要素を並べ替えることができます。

メディアクエリのテンプレート領域を変更し、新しいグリッド構造を表示できます。

詳細については、codepenを確認してください。

gridでは、ほとんどすべてがブートストラップグリッドシステムを使用します。ブートストラップは、すべてのバージョンでクラス名を変更する場合があります(ただし、Angular Likeとは異なります)。したがって、どのバージョンがどのクラス名を持っているかを覚えておく必要があります。

CSSグリッドプロパティを使用することにより、(IEでも)CANビューで要素を簡単に表示できます。

読んでくれてありがとう!気に入ったら、をたたいて投稿を共有してサポートしてください。以下にコメントleaveを残してください。