CSSグリッド

CSS Gridはこれらのようなstuffsを作るためのCSSモジュールです.

これは、CSSのレイアウトと位置に使用されます。

初心者には、CSSグリッドは一見一見で混乱するような不明確な用語で構成されています.
グリッドプロパティは行と列で構成されます.

上の写真から.
学生;

Elvis, Charles, and James are in the first column.
Steve, Joe and Peter in the second column.
Dan, Jake and Paul in the third column.
The fourth column consists of Clair, Martha and Jane.

これは4列になります.
また

Elvis, Steve, Dan and Clair occupy the first row.
Charles, Joe, Jake and Martha in the second row, and
James, Peter, Paul and Jane in the third row.

したがって、4列3行.
下の写真では、1列目に3行、2列目に2行があります.

さて、行と列の並びを確立しました.
これらの知識をCSSグリッドレイアウトに適用することができます.
以下の構成は、4列2行のブロックである.

を読み、この魔法が行われた方法を見つけてみましょう!
HTMLコードでは

現在、スタイリング
まず、私たちのブロックは、我々のHTMLコードのセクションタグであるコンテナに置かれる必要があります.
次は
セクションタグのディスプレイがグリッドレイアウトで表示されるべきであることをブラウザに知らせるために、セクションタグのディスプレイをグリッドに設定します.
コンテナ{ディスプレイ:グリッド}
これらのコードを実行してください.
少なくともまだでない.
動く
私たちのブラウザに、私たちのブロックがファイルに入れたい列と列の数を伝える必要があります.
する
種類
コンテナ
ディスプレイ:グリッド;
グリッドテンプレート行
グリッドテンプレート列
｝
まだ何も走らないでください.
説明しましょう.
我々は2行と4列を作成しているので
私たちのスタイルはこうです.
コンテナ
ディスプレイ:グリッド;
グリッドテンプレート行:繰り返し
グリッドテンプレート列:繰り返し(4);
｝
待って!待って!
まだ不完全;
ブロックごとに特定の幅と高さを指定する必要があります.
我々は個々にブロックのスタイルを整えることができますが、それは時間がかかりますまた、あいまいなコードをもたらすでしょう.
だから、それについて行く方法?
非常に簡単.
これをCSSスタイルに追加します.
コンテナ
ディスプレイ:グリッド;
グリッドテンプレート行:繰り返し
グリッドテンプレート列:繰り返し
｝
こちらです.
60 pxは高さを表し、1 frは各ブロックの幅を表します.
もちろん、
任意の値を使用することができます(または自動設定)、任意の単位(px、em、fr、%など).
あなたはCSSグリッドの適切な習得を得るまで行と列で遊んでみてください.

うん.
ルックスは良いですが、10代のweeny問題は、間隔です.
スペースCSSグリッドにはグリッドギャップを使用します.
グリッドギャッププロパティはCSSマージンと非常によく似ており、ブロック/要素と同じように動作します.
同じように.
マージン: 50 pxは以下のように解釈されます:
マージントップ:50 px
マージン底:50 px
マージン右:50 px
マージンは左:50 px
マージン:20 px 30 pxは以下のように解釈されます
マージン底:20 px
証拠権:30 px
マージンは左:30 px;
同様の原理がグリッドギャップに適用される
グリッドギャップ:50 pxのように解釈されます
グリッドカラムギャップ
グリッドギャップ:20 px 30 px:グリッド行ギャップ:20 px
グリッドカラムギャップ
さあ
CSSコードを更新しましょう
コンテナ
ディスプレイ:グリッド;
グリッドテンプレート行:繰り返し
グリッドテンプレート列:繰り返し
グリッドギャップ:10 px
｝
Voila!

注:ここに掲示されるコードスニペットは、グリッド・スタイリングだけを含みます、そして、このように、出力画像のように正確な色と他のスタイルを出力することができません.
完全なコードを取得するには
このペンをフォークすることができます.

https://codepen.io/devhalimah/pen/eYzYKLa/