リスト(li)を縦並びにし、指定数で折り返させるためのGrid CSS

こんにちは、クートス・ラボ菅井です。

この度お客様のサイトで、リスト（li）要素を縦並び＆２カラムにしたい場面が出てきましたので、調べた上で実装したコードをメモしておきたいと思います。
もちろん、li要素以外でも使えます。

grid cssを使って縦並び＆折り返しする

上記のように、リストは縦に並んでるんですが、途中で２カラムになっているレイアウトにし、
モバイルでは縦にずらっと並ぶようにします。

色々試しましたが結局grid cssを使用することで解決しました。

実際のコードはこちら（PC）

.item {
 　　display: grid;
 　　grid-auto-flow: column;
 　　grid-template-rows: repeat(3, auto); //３個目で折り返したい場合
}

grid-template-rows: repeat(〇, auto);　この○の部分に折り返したい個数を入れて下さい。
上記コードではサンプルで３と入力しています。

モバイルで１カラムにする場合（SP）

@media screen and (max-width: 850px){
  .item {
   　　grid-auto-flow: row;
  }
}

メディアクエリはご自身で調整して下さい！

これで希望通りの実装ができました。