フレックスボックスの配置調整は、justify-contentプロパティや、align-itemsプロパティで設定することができますが、同じようにグリッドレイアウトにもこういったプロパティを適用させることができます。（フレックスボックスの配置調整の記事は ▶︎こちら）
フレックスボックスの時とほとんど同じ感覚で使えるのですが、grid-template-clumns（rows）など、グリッドレイアウトならではのCSSプロパティと組み合わせることになるので、注意が必要な場合もあります。
というわけで、justify-contentプロパティとalign-itemsプロパティの紹介は他の記事でもしているのですが、グリッドレイアウトではどうなるか改めて確認していきましょう！
◆ justify-contentで調整する ◆
グリッドレイアウトで配置したアイテムを中央や左端・右端などアイテム配置の横方向の調整を行いたい場合は、justify-contentプロパティを使用します。
セレクタは、グリッドアイテムの親要素（display:gird;を設定するセレクタと同じ）にして、以下のように記述します。
■セレクタ { justify-content: center; }
もちろん、値はcenter以外にも色々あるので表にまとめました。
＊justify-contentのキーワード値と効果＊
| キーワード値 | 効果 |
| center | 中央に配置する |
| start | 先頭に寄せる |
| end | 末尾に寄せる |
| space-between | 等間隔に配置。先頭は先端に、末尾は末端に寄せる |
| space-around | 等間隔に配置。先頭の前と末尾の後の余白は、アイテム間の余白の半分 |
| space-evenly | 等間隔に配置。先頭の前と末尾の後の余白も同じ |
ここで注意なのですが、フレックスボックスの時の値はflex-start(end)だったのに対し、今回はstart(end)…となっています。
というのは、flex-start(end)は、フレックスボックスのアイテムにのみに適用されるものだからです。
…なのですが、flex-start(end)を指定したセレクタがフレックスボックスではない場合、start(end)のように適用されます。なので、結果としてはあまり気にし過ぎなくて良いということにはなるのですが、予備知識として知っておいて損はないと思います。
それでは、サンプルコードと、切り替わり機能付き表示結果を見ていきましょう！
<div class="gridbox1">
<div>グリッド１</div>
<div>グリッド２</div>
<div>グリッド３</div>
<div>グリッド４</div>
<div>グリッド５</div>
<div>グリッド６</div>
</div>
.gridbox1 {
background-color: aliceblue;
text-align: center;
display: grid;
grid-template-columns: repeat(2,minmax(50px,50px));
grid-gap: 5px;
justify-content: start;
padding: 20px 0;
}
.gridbox1 div {
background-color: lightgreen;
}
.gridbox1 div:nth-child(2n+1) {
color: white;
background-color: darkgreen;
}
- POINT!
- ・グリッドレイアウトの横方向の配置調整は、フレックスボックスと同じようにjustify-contentを使う！
- ・基本的に、flex-start(end)ではなく、start(end)を使うと良い！
◆ align-itemsで調整する ◆
justify-contentと同様に、グリッドレイアウトではalign-itemsも適用させることができます。
先述のjustify-contentはアイテムの横方向の配置調整でしたが、align-itemsはアイテムの上端や下端、上下に対する中央など、アイテム配置の縦方向の調整を行いたい場合に使用します。
セレクタの指定はjustify-contentと同じで、グリッドアイテムの親要素に指定し、以下のように記述します。
■セレクタ { align-items: center; }
また、align-itemsの値には以下のようなものがあります。
＊align-itemsのキーワード値と効果＊
| キーワード値 | 効果 |
| center | 中央に配置する |
| start | 上端に寄せる |
| end | 下端に寄せる |
| stretch | グリッドの高さが揃うように引き伸ばす |
そしてここで、justify-contentにはなかった注意点があります。grid-template-columnsプロパティはカラム（列）の数を決める上で設定が必須であり、その時にアイテムの横幅を同時に指定する事になるので「横幅の指定を忘れる」ということはまずありません。
しかし、アイテムの縦の幅は特に指定しなくてもグリッドレイアウトにすることは可能なので、grid-template-rowsの指定はcolumnsの指定と比べると忘れてしまいがちです。
align-itemsプロパティは、アイテムの高さの位置調整を行うプロパティなので、高さの定義がないとアイテムを上下に動かしようがない…ということになってしまいます。
align-itemsプロパティが効かない場合、そもそも高さが定義されているかどうかを確認してみると良いでしょう。
それでは、サンプルコードと切り替え機能付き表示結果です。
<div class="gridbox1">
<div>グリッド１</div>
<div>グリッド２</div>
<div>グリッド３</div>
<div>グリッド４</div>
<div>グリッド５</div>
<div>グリッド６</div>
</div>
.gridbox1 {
background-color: aliceblue;
text-align: center;
display: grid;
grid-template-columns: repeat(2,minmax(100px,120px));
grid-template-rows: repeat(3,100px);
grid-gap: 5px;
justify-content:center;
padding: 20px 0;
}
.gridbox1 div {
background-color: lightgreen;
}
.gridbox1 div:nth-child(2n+1) {
color: white;
background-color: darkgreen;
}
▲サンプルコードに、grid-template-rowsプロパティが追加されていることに注目です。これがないと高さの定義がされなくなり、上下の位置移動が起こらなくなってしまいます。
- POINT!
- ・グリッドアイテムの高さの調整は、align-itemsプロパティで行う！
- ・grid-template-rowsプロパティなどで、高さを定義しておくのを忘れずに！
◆ グリッドアイテムの位置を個別調整（justify-self） ◆
justify-contentプロパティと、align-itemsプロパティは、グリッドアイテムの位置を一括で調整するプロパティですが、アイテムの位置を個別に調整することもできます。
アイテムの位置を横方向に調整するには、justify-selfプロパティを使います。
セレクタはグリッドアイテムの親要素ではなく、グリッドアイテムそのものに指定し、以下のように記述します。
■セレクタ { justify-self: center ; }
justify-selfの値は基本的にjustify-contentやalign-itemsと同じなのですが、個別に設定するものなので、space-aroundなど「一括で複数のアイテムの位置を調整する値」はありません。
それではさっそく、サンプルコードと表示結果を確認して見ましょう。
<div class="gridbox1">
<div>１</div>
<div>２</div>
<div>３</div>
<div>４</div>
<div class="changegrid1">５</div>
<div>６</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
.gridbox1 {
background-color: aliceblue;
text-align: center;
display: grid;
grid-template-columns: repeat(3,minmax(60px,300px));
grid-gap: 30px;
justify-content:center;
padding: 20px 0;
}
.gridbox1 div {
background-color: lightgreen;
}
.gridbox1 div:nth-child(2n+1) {
color: white;
background-color: darkgreen;
}
.changegrid1 {
background-color: darkorange !important;
justify-self: start;
}
▲注意点としては、grid-template-columnsでminmax値を指定していても、justify-selfを指定しているアイテムには無効になってしまいます。（他のアイテムと同様に幅が決められてしまったら、横に動かしようがなくなってしまうからです）
他のアイテムと幅を合わせた上で、位置を移動させたい場合はpositionプロパティなどを使うと良いでしょう。
- POINT!
- ・グリッドレイアウトのアイテムの個別の位置調整(横移動)は、justify-selfプロパティを使う！
- ・justify-selfが適用されているアイテムには、grid-template-columnsで指定した幅が無効になるので注意！
◆ グリッドアイテムの位置を個別調整（align-self） ◆
グリッドアイテムの縦方向の個別の位置調整は、align-selfプロパティ
を使います。
セレクタはjustify-selfと同じようにグリッドアイテムに指定し、以下のように記述します。
■セレクタ { align-self: center ; }
align-selfプロパティの値は、align-itemsと同じと思ってもらって大丈夫です。
ということで、毎度のことながらサンプルコードと表示結果を確認してイメージを具体化させていきましょう！
<div class="gridbox1">
<div>１</div>
<div>２</div>
<div>３</div>
<div>４</div>
<div class="changegrid1">５</div>
<div>６</div>
<div>７</div>
<div>８</div>
<div>９</div>
</div>
.gridbox1 {
background-color: aliceblue;
display: grid;
grid-template-columns: repeat(3,minmax(60px,300px));
grid-template-rows: repeat(3,100px);
grid-gap: 30px;
justify-content: start;
align-items: end;
padding: 20px 0;
}
.gridbox1 div {
background-color: lightgreen;
}
.gridbox1 div:nth-child(2n+1) {
color: white;
background-color: darkgreen;
}
.changegrid1 {
background-color: darkorange !important;
align-self: start;
}
align-selfで上下の配置調整を行えることが確認できました。ただ、上揃えとか下揃えとか、ある一定のラインに揃えたいわけではなく、任意の位置に移動させたいということであれば、
positionプロパティを使った移動で調整した方がスムーズな場合もあります。
justify-self・align-selfを使えば、少なくとも枠からはみ出たり大きく配置がズレてしまうことがないというメリットがある一方、細かい位置調整は苦手です。positionプロパティはその反対という感じなので、状況に応じてどのCSSプロパティを使うべきか判断する。…ということが重要です。
- POINT!
- ・グリッドレイアウトのアイテムの個別の位置調整(縦移動)は、align-selfプロパティを使う！
- ・基本的な使い方は、justify-selfと同じ！
- ・位置の微調整が必要な場合は、positionプロパティなど他のCSSの使用の検討が有効なことも！
