グリッドレイアウトで任意の個数ごとに折り返す方法

グリッドレイアウトを使って子要素を任意の個数ごとに折り返す方法を紹介します。
通常、以下のようなCSSを適用すると、子要素はコンテナに収まるように列方向（上から下、左から右）に流れて配置されますが、場合によっては特定の個数ごとに折り返したいことがあるかと思います。

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 最大2列 */
  grid-template-rows: repeat(6, 1fr); /* 最大6行 */
  grid-auto-flow: column; /* 列方向に要素を流す */
}

元のCSSを適用すると、子要素の並び順は次のようになります。

1 7
2 8
3 9
4 10
5 11
6 12

See the Pen
Grid-normal-order by hachi8833 (@hachi8833)
on CodePen.

では以下のように3個ごとに折り返したい場合はどのようにすればいいでしょうか？

1 4
2 5
3 6
7 10
8 11
9 12

上記のような並び順を実現するためには、nth-child を使用します。grid-template-rowsの指定は不要になるので外してしまって構いません。修正後のCSSは以下の通りです。

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 最大2列 */
  grid-auto-flow: column; /* 列方向に要素を流す */
}

.item:nth-child(6n + 1),
.item:nth-child(6n + 2),
.item:nth-child(6n + 3) {
  grid-column: 1; /* 1列目に配置 */
}

.item:nth-child(6n + 4),
.item:nth-child(6n + 5),
.item:nth-child(6n + 6) {
  grid-column: 2; /* 2列目に配置 */
}

See the Pen
Grid-grouped-order by hachi8833 (@hachi8833)
on CodePen.

nth-childは、子要素の番号を指定してスタイルを適用するための擬似クラスです。
今回の例では、nth-child(6n + 1)... を使って、1〜3番目の要素は1列目、4〜6番目は2列目...という配置になるようにしています。
6n + 1 と指定することで、6の倍数+1番目の要素、つまり1, 7, 13...番目の要素が選択されるようになっています。(nは0から始まるので、1番目の要素も選択されます。)

以上、グリッドレイアウトで任意の個数ごとに折り返す方法の紹介でした。