新・HTML/CSS入門編16: グリッドレイアウトを理解しよう

グリッドレイアウトでは、グリッドアイテムが占める領域よりもグリッドコンテナに余白ができることがあります。この余白の扱い方によって、レイアウトの見栄えは大きく変わります。そこで活躍するのが、グリッド全体の位置揃えを制御するalign-contentプロパティとjustify-contentプロパティです。

これらのプロパティは、グリッドトラックのセット全体（グリッドアイテムが配置されている領域）を、グリッドコンテナの余ったスペース内でどのように配置するかを決定します。
・justify-content: グリッドコンテナ内の横方向の余白をどのように埋めるかを制御します。
・align-content: グリッドコンテナ内の縦方向の余白をどのように埋めるかを制御します。

この2つのプロパティは共通の値を利用します。主な値としては、
・start: グリッドをコンテナの先頭に寄せて配置します。
・end: グリッドをコンテナの末尾に寄せて配置します。
・center: グリッドをコンテナの中央に配置します。
・space-between: グリッドアイテムの最初を先頭に、最後を末尾に配置し、残りのアイテム間の余白を均等に分配します。
・space-around: 各グリッドアイテムを均等に配置し、その両側に均等な空白（アイテム間の空白の半分）を配置します。
・space-evenly: space-aroundと似ていますが、アイテム間および両端のすべての空白が同じサイズになるように配置します。
・stretch: グリッド内に余白がある場合に、トラックサイズがautoの行または列を、余白を埋めるように引き伸ばして表示します。これにより、グリッドがコンテナ全体に広がるように見えます。

これらのプロパティと値を活用することで、様々なデバイスサイズやコンテンツ量に応じて、グリッドレイアウトを柔軟にかつ美しく配置できます。

justify-contentプロパティやalign-contentプロパティにキーワードstartやendを指定すると警告が表示されることがありますが、実行上は問題ありません。

@charset "UTF-8";
.grid_container{
    display: grid;
    grid-template-rows: repeat(2, 150px);
    grid-template-columns: repeat(3, 150px);
    justify-content: start;
    align-content: end;
    width: 600px;
    height: 450px;
    outline: dashed 5px greenyellow;
}
.grid_A{background-color:lime;}
.grid_B{background-color:aqua;}
.grid_C{background-color:yellow;}
.grid_D{background-color:fuchsia;}
.grid_E{background-color:blue;}
.grid_F{background-color:red;}

@charset "UTF-8";
.grid_container{
    display: grid;
    grid-template-rows: repeat(2, 150px);
    grid-template-columns: repeat(3, 150px);
    justify-content: space-between;
    align-content: center;
    width: 600px;
    height: 450px;
    outline: dashed 5px greenyellow;
}
.grid_A{background-color:lime;}
.grid_B{background-color:aqua;}
.grid_C{background-color:yellow;}
.grid_D{background-color:fuchsia;}
.grid_E{background-color:blue;}
.grid_F{background-color:red;}

@charset "UTF-8";
.grid_container{
    display: grid;
    grid-template-rows: repeat(2, 150px);
    grid-template-columns: repeat(3, 150px);
    justify-content: space-evenly;
    align-content: space-around;
    width: 600px;
    height: 450px;
    outline: dashed 5px greenyellow;
}
.grid_A{background-color:lime;}
.grid_B{background-color:aqua;}
.grid_C{background-color:yellow;}
.grid_D{background-color:fuchsia;}
.grid_E{background-color:blue;}
.grid_F{background-color:red;}

@charset "UTF-8";
.grid_container{
    display: grid;
    grid-template-rows: 150px auto;
    grid-template-columns: 150px 150px auto;
    justify-content: stretch;
    align-content: stretch;
    width: 600px;
    height: 450px;
    outline: dashed 5px greenyellow;
}
.grid_A{background-color:lime;}
.grid_B{background-color:aqua;}
.grid_C{background-color:yellow;}
.grid_D{background-color:fuchsia;}
.grid_E{background-color:blue;}
.grid_F{background-color:red;}

MDN web docs - justify-content
https://developer.mozilla.org/ja/docs/Web/CSS/justify-content

MDN web docs - align-content
https://developer.mozilla.org/ja/docs/Web/CSS/align-content