CSS グリッドコンテナ
試してみる »
グリッドコンテナ
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プロパティは列の幅の指定にも使用できます。
例
.grid-container {
display: grid;
grid-template-columns: 80px 200px auto 40px;
}
grid-template-rows プロパティ
grid-template-rows プロパティは各行の高さを設定します。
プロパティの値はスペース区切りのリストで、各値が対応する行の高さを定義します：
例
.grid-container {
display: grid;
grid-template-rows: 80px 200px;
}
justify-content プロパティ
justify-content プロパティは、コンテナ内のグリッドを整列させるために使用され、フレックスコンテナの主軸（またはグリッド行軸）に沿って要素の間および周囲のスペースをどのように配分するかを設定します。
注意：justify-content プロパティを有効にするには、グリッドの総幅がコンテナの幅より小さくなければなりません。
justify-content詳細は以下を参照してください：CSS 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このプロパティは、コンテナ内のグリッド要素を垂直方向に整列させる方法を設定するために使用します。
注意：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;
}
その他の拡張