CSS グリッドコンテナ
- 前のページ CSS グリッドレイアウトモジュール
- 次のページ 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
その値はスペースで区切られたリストで、各値は対応する行の高さを定義します：
インスタンス
.grid-container {
display: grid;
grid-template-rows: 80px 200px;
}
justify-content 属性
justify-content 属性はコンテナ内で全体のグリッドをアライメントするために使用されます。
1
2
3
4
5
6
7
8
注意：グリッドの合計幅はコンテナの幅より小さくなければなりません。そうすれば、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
7
8
注意：グリッドの合計高さはコンテナの高さよりも小さくなければ、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;
}
- 前のページ CSS グリッドレイアウトモジュール
- 次のページ CSS グリッドアイテム
