CSSグリッドコンテナ
1
2
3
4
5
6
7
8
グリッドコンテナ
HTML要素をグリッドコンテナとして動作させるには、display
プロパティを
grid
またはに設定する必要がありますinline-grid
。
グリッドコンテナは、列と行の内側に配置されたグリッドアイテムで構成されます。
grid-template-columnsプロパティ
このgrid-template-columns
プロパティは、グリッドレイアウトの列数を定義し、各列の幅を定義できます。
値はスペースで区切られたリストであり、各値はそれぞれの列の幅を定義します。
グリッドレイアウトに4列を含める場合は、4列の幅を指定します。すべての列の幅を同じにする必要がある場合は、「自動」を指定します。
例
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
値はスペースで区切られたリストであり、各値はそれぞれの行の高さを定義します。
例
.grid-container {
display: grid;
grid-template-rows: 80px 200px;
}
justify-contentプロパティ
プロパティは、コンテナ内のjustify-content
グリッド全体を整列させるために使用されます。
1
2
3
4
5
6
注:justify-content
プロパティを有効にするには、グリッドの合計幅をコンテナの幅より小さくする必要があります。
例
.grid-container {
display: grid;
justify-content: space-evenly;
}
例
.grid-container {
display: grid;
justify-content: space-around;
}
例
.grid-container {
display: grid;
justify-content: space-between;
}
例
.grid-container {
display: grid;
justify-content: center;
}
例
.grid-container {
display: grid;
justify-content: start;
}
例
.grid-container {
display: grid;
justify-content: end;
}
align-contentプロパティ
このalign-content
プロパティは、コンテナ内のグリッド全体を
垂直方向に整列させるために使用されます。
1
2
3
4
5
6
注:プロパティを有効にするには、グリッドの全高をコンテナの高さよりも低くするalign-content
必要があります。
例
.grid-container {
display: grid;
height: 400px;
align-content: center;
}
例
.grid-container {
display: grid;
height: 400px;
align-content: space-evenly;
}
例
.grid-container {
display: grid;
height: 400px;
align-content: space-around;
}
例
.grid-container {
display: grid;
height: 400px;
align-content: space-between;
}
例
.grid-container {
display: grid;
height: 400px;
align-content: start;
}
例
.grid-container {
display: grid;
height: 400px;
align-content: end;
}