簡単なガイド

何がCSSグリッドですか？

グリッドは、CSSのレイアウトモジュールを使用して、行と行の応答Webデザインのレイアウトを作成します.
使用する場合、HTMLで親コンテナを作成し、CSSdisplay 要素のプロパティ.flex or inline-flex .

<div id="flex-container">
  <div>Flex Item 1</div>
  <div>Flex Item 2</div>
  <div>Flex Item 3</div>
  <div>Flex Item 4</div>
</div>

これは、グリッドを使用して同じですdisplay 資産grid or inline-grid .

grid コンテナーをブロックレベル要素として表示します

inline-grid コンテナをインラインレベル要素として表示します

Codepenの上で続いてください：

グリッド線はグリッドをカラムと行に分割する.

左側から始まるように、垂直および水平のグリッド線は1から始まります.これは、グリッドアイテムの位置を決定するために使用できる数値インデックスです.

また、負の数値インデックスを使用して、グリッドの反対側の端を得ることができます.

グリッドセルは、グリッド行＆列が交差する場所で定義される単一の単位です.
エーGrid Track つの隣接する格子線の間のスペース、したがって、本質的に列および行.
これがMDNで説明されています.

溝は、互いからセルを分離するグリッド・トラックを分離するのに用いられることができます.これはgap プロパティは、以下の明示的なグリッドで取得します.

明示的グリッド

明示的なグリッドは、明示的に行と列の正確な数で定義されるグリッドレイアウトです.

これらのプロパティをグリッドコンテナに宣言します。

grid-template-columns

必要な列数を指定するにはgrid-template-columns .grid-template-columns: auto auto auto コンテナの幅にまたがる3つの等間隔の列を示します.

grid-template-rows

必要な行の数を指定するにはgrid-template-columns .grid-template-rows: 50px 50px 50px 高さの3列.

gap

The gap プロパティは、グリッドセル間のガタを設定するために使用されます.

これらのプロパティのそれぞれが何をするかを知っているので、それらの中に様々な値を使用することができますが、PXかFRのどちらかに固執します。

fr

フレキシブルユニットfr グリッドで導入されました.これは、グリッドコンテナ内の利用可能なスペースの一部を表します.
あなたが3つのコラムを各々のサイズで持っているならば1fr , それらはグリッドコンテナー内で同じサイズになります.

repeat

The repeat 関数は、列または行を定義するときに自分自身を繰り返す必要がないように使用されます.明示的に定義したいカラム数と、そのカラムのサイズを引数とします.grid-template-columns: repeat(3, 1fr)

暗黙のグリッド

暗黙のグリッドは、明確に定義されたトラックがあるより多くのグリッドアイテムを持っているときに使用されるレイアウトです.
たとえば、4つの列と2つの行を明示的に定義していたが、コンテナに収まることができたものより多くの項目を持っていた場合、暗黙のグリッドは他の列と行で定義された規則を使用して作成されます.
あなたのグリッドがどのように多くのアイテムがわからない場合は、全体のレイアウトは、単に暗黙のグリッドになる可能性があります.

暗黙のうちに作成された列と行のサイズを定義するには、グリッドオート行とグリッドオートカラムを以前から同じ値で使用できます。

中でサイジングgrid-auto-columns 暗黙の4番目の列がない場合は動作しません.
暗黙の4番目の列を使用してgrid-column . grid-column が短いgrid-column-start & grid-column-end .
グリッド行の値を使用して、列を開始したい場所を示します.これを行うには、速記を使います.

grid-column: 4 / 6

grid-column: starting-grid-line / ending-grid-line

速さで前方スラッシュが必要です.

余分な資源

MDN CSS Grid

CSS-Tricks Grid

Basic Concepts of Grid Layout

w3schools Grid Layout