CSS サンプル: 可変個のタイルレイアウト (grid)

display: grid を使って可変個のタイルを配置します。flex よりもスタイルの記述が少なくなりますが、IE11 では使用できません。 (IE11 では自動配置がサポートされていないためタイル状の配置になりません。このサンプルでは -ms- 接頭辞つきの指定はすべて取り除いています)

2列

1
2
3
4
5
6
7
8
9
10
11

3列

1
2
3
4
5
6
7
8
9
10
11

4列

1
2
3
4
5
6
7
8
9
10

5列

1
2
3
4
5
6
7
8
9
10
11