CSSグリッド入門

CSSグリッドとは

あなたのHTML要素の位置に役立つ行と列で構成される2次元システム.

CSSグリッドの有効活用方法

任意の要素で、display:grid ;を宣言する
その要素に追加されるすべての項目は、デフォルトで行を占有します.
それで、私がグリッドに5つのdivを加えるならば、あなたはdivによってつくられて、占領される5つの行を見ます.

グリッドコンテナ要素のデフォルト動作を変更する方法

3 x 2 ( 3行x 2列)グリッドを作成する場合は、グリッド要素を宣言する必要があります.

display:grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr;

注意:ここでは、PX、%、および多くのように、FRの代わりにここで使用できる他の多くのユニットがあります.FRユニットは残りのスペースを意味するので、この例では全ての行は同じ高さを有し、全ての列は同じ幅を有する.

グリッドコンテナ内のアイテムの位置

デフォルトでは、項目は左から右、上から下へ流れます.最後のセクションの例を続けるので、第1のアイテムは左上のセルを占めます、第2のアイテムは一番上のセンターセルを占領します、そして、その上、最初の列がいっぱいになるまで.その後、アイテムは次の行に移動します.
注:これはgrid-auto-flow: columnを指定することによって変更することができますデフォルトの動作ですし、項目が上部から下に向かって左から右に流れます.

特定の要素を特定のセルに配置する方法

我々が3 x 3格子を持つと言ってください.

クラスitemで要素を中心セルに配置したいなら、宣言しなければなりません

.item {
  grid-area: 2/2/3/3;
}

グリッド領域:行スタート/col start/row end/col end ;
ここで行の開始などを参照してください.

グリッドを定義し、グリッド上の項目を配置するには、さまざまな方法があります.これは非常に基本的な出発点として機能するので、あなたのプロジェクトでグリッドを使用して起動することができます.