CSS グリッド コンテナ
1
2
3
4
5
6
7
8
グリッドコンテナ
HTML要素をグリッドコンテナとして動作させるには、displayプロパティをgridまたはinline-gridに設定する必要があります。
グリッドコンテナは、列と行の中に配置されたグリッドアイテムで構成されます。
grid-template-columnsプロパティ
grid-template-columnsプロパティは、グリッドレイアウトの列数を定義し、各列の幅を定義できます。
値はスペースで区切られたリストで、各値はそれぞれの列の幅を定義します。
グリッドレイアウトに4列を含める場合は、4列の幅を指定するか、すべての列を同じ幅にする場合は「auto」を指定します。
例
4つの列を持つグリッドを作成します。
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}
ノート：4列のグリッドに4つ以上のアイテムがある場合、グリッドはアイテムを配置する新しい行を自動的に追加します。
grid-template-columnsプロパティを使用して、列のサイズ(幅)を指定することもできます。
例
4つの列のサイズを設定します。
.grid-container {
display: grid;
grid-template-columns: 80px 200px auto 40px;
}
grid-template-rowsプロパティ
grid-template-rowsプロパティは、各行の高さを定義します。
1
2
3
4
5
6
7
8
値はスペースで区切られたリストで、各値はそれぞれの行の高さを定義します:
justify-contentプロパティ
justify-contentプロパティは、コンテナー内のグリッド全体を整列するために使用されます。
1
2
3
4
5
6
ノート：justify-contentプロパティが効果を発揮するには、グリッドの合計幅がコンテナの幅より小さくなければなりません。
align-content プロパティ
align-contentプロパティは、コンテナ内のグリッド全体を垂直方向に整列させるために使用されます。
1
2
3
4
5
6
ノート：align-contentプロパティが効果を発揮するには、グリッドの合計の高さがコンテナの高さよりも小さくなければなりません。