この記事では、CSSグリッドレイアウトを使って要素（Grid Item）を任意の順番に配置する方法を説明します。そのあと、グリッドで複数の要素の位置を揃える方法を解説します。
過去にもグリッド関係の重要なトピックを掲載しました。最初に『2017年に学びたい！次世代CSSレイアウト「Grid Layout Module」の使い方』でグリッドレイアウトで要素を配置するいろいろな方法を、次のステップとして自動で各要素を配置するグリッド自動配置アルゴリズムについてを『徹底検証！CSS Grid Layout Moduleの自動配置アルゴリズムはどう働くか？』で説明しました。
この記事に関するデモは、Firefox（執筆時点ではバージョン52）もしくはChrome（執筆時点ではバージョン57）の使用を推奨します。両者ともグリッドレイアウトが初期設定でサポートされました。
Orderプロパティの仕組み
グリッド内の各要素の配置で順番を指定するにはorderプロパティを使います。デフォルトではDOM上の順番で配置されるだけです。たとえば、ソースファイルで要素Aが要素Bよりも先にあったら、グリッドでも先に配置されます。プロジェクトによってはこれでも良いですが、そうではないケースもあります。
たくさんの要素を並べるとき、あるいは動的に要素が追加されるような場合にはorderプロパティはとりわけ便利です。たとえば、要素が常にグリッドの最後尾に追加されるようにしたい場合もorderプロパティなら簡単です。
order（順番）の値が最小の要素がグリッドの先頭に配置されます。逆に値がより大きいのものは後ろに配置されます。値が同じ要素が複数あれば、ソースファイルで先に登場したものから順に配置されます。
実例は次のようになります。
HTMLは次のようになります。
<div class="container">
<div class="item a">A</div>
<div class="item b">B</div>
<div class="item c">C</div>
<div class="item d">D</div>
<div class="item e">E</div>
<div class="item f">F</div>
<div class="item g">G</div>
<div class="item h">H</div>
<div class="item i">I</div>
<div class="item j">J</div>
</div>
グリッドに要素を配置するためのCSSは以下のようになります。
.c {
grid-row-start: 1;
grid-row-end: 2;
}
.e {
grid-row-start: 1;
grid-row-end: 3;
}
.b, .j {
order: 2;
}
.a, .i {
order: 3;
}
自動配置アルゴリズムの記事を読んだ人は思い出してください。このアルゴリズムでは、明示的に列指定のある要素が先に配置され、指定のない要素があとに配置されます。したがって、要素Dはソースファイル上で要素Eよりも先にありますが列と行の指定がないので、位置指定のある要素E（grid-row-start: 1、grid-row-end: 3）よりもあとに配置されます。
位置指定のない要素同士の間では、orderの値が最小のものが最初に配置されます。そのため要素D、F、G、Hは、要素A、Bよりも先になります。要素BとJはorderの値も同じなので、ソースファイルの順番通りに並びます。また、要素BとJはorderの値が要素AとIよりも小さいため、先に配置されている点にも注目してください。
orderプロパティでグリッドの要素を並べ替える前に、常にアクセシビリティ（音声による読み上げ機能など）に注意してください。orderプロパティは視覚的な表示以外の部分には影響しません。またTabキーなどで順番にフォーカス移動するときの順序も変更されません。要素の視覚的な配置が、音声読み上げ機能やキーによるナビゲーションの順序と一致しなくても構わない場合にのみ使用してください。
orderプロパティでグリッドの要素を並べ替えるとスタイルシートはnon-confroming（非推奨）になります。
グリッドの要素を横方向に揃える
横軸（行、row）に合わせて要素の位置を揃えるにはjustify-self、justify-itemsを使用します。
justify-selfプロパティは要素1つの配置を揃えるとき、justify-itemsはグリッドの全要素の位置を揃えるときに使用します。
justify-selfプロパティで使う値は次の4つです。
- end：要素をグリッド枠の右側に揃える
- start：要素をグリッド枠の左側に揃える
- center：要素をグリッド枠の中心に揃える
- stretch：要素をグリッド幅に合わせる
justify-selfの初期値はstretchです。
justify-itemsプロパティも同じように、複数の要素を横軸に揃えます。justify-selfプロパティと同じ4つの値を使い、初期値はstretchです。
以下がjustify-selfを使ったデモです。
グリッドの要素を縦方向に揃える
縦軸（列、column）に沿って要素の位置を揃えるには、要素が1つならalign-selfを、全要素の位置を揃えるならalign-itemsを使います。
先の2つのプロパティと同じくalign-selfとalign-itemsも、start、end、center、stretchの4つの値をとります。
startとendはそれぞれ、グリッド枠の上（start）または下（end）に合わせて要素を配置します。centerは要素を枠内の中心に配置し、stretchは要素の高さをグリッド枠の高さに合わせて表示します。
デモで最初の行と次の行の間に余白があるのは、最初の行の要素がtopに揃えられたのに対し次の行の要素がbottomに揃えられているためです。
以下のデモは縦の列に合わせてalign-selfで整列しています。
グリッド枠自体の位置を合わせる
グリッドの外枠がコンテナの外枠と合っていない場合もあります。グリッドの行や列のサイズが固定長で指定されているときに起こります。その場合、ある方向を基準にグリッド全体の位置を指定したいところです。
これまでに説明したプロパティと同じように、横軸（行、row）に沿って位置を合わせるのがjustify-contentプロパティ、縦軸（列、column）に沿って位置を合わせるのがalign-contentプロパティです。
これらのプロパティはグリッドコンテナに適用されます。値はこれまでに説明したstart、end、center、stretchのほかにも、space-around、space-between、space-evenlyという値が使えます。
- space-around：各グリッド領域間に等しい大きさの余白を加えるとともに、グリッド外枠とコンテナの間にはその半分の大きさの余白を加える
- space-between：各グリッド領域間に等しい大きさの余白を加えて、グリッド外枠とコンテナの間には一切余白を加えない
- space-evenly：各グリッド領域間、およびグリッド外枠とコンテナの間に、すべて等しい大きさの余白を加える
justify-contentとalign-contentの初期値はともにstartです。
このあとのデモでグリッドの要素の位置合わせに使うCSSは次のようになります。
.container {
justify-content: space-around;
align-content: space-evenly;
}
この方法で要素を整列させると、複数の行や列にまたがった要素が縦長になったり横長になったりして意図しない見栄えになるかもしれません。増えてしまう幅や高さは、縦や横にまたいでいる領域の数によります。
最後に
この記事では、グリッド上の要素を並べ替えて位置を揃えるための基礎を説明しました。これでグリッドレイアウトの操作はバッチリでしょう。
（原文：How to Order and Align Items in Grid Layout）
［翻訳：西尾健史／編集：Livit］
