CSS サンプル: flex によるグリッド
flex による簡易的なグリッドです。
等間隔
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
4
6
6
比率指定
1
11
2
10
3
9
4
8
5
7
6
6
7
5
8
4
9
3
10
2
11
1
8
2
2
3
6
3
等間隔 (余白あり)
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
4
6
6
比率指定 (余白あり)
各要素 (.flex-item) に margin を設定すると flex-grow の伸張が等間隔のときと比べてずれるため各要素の直下に margin のための div (.flex-item-inner) を追加しています。
1
11
2
10
3
9
4
8
5
7
6
6
7
5
8
4
9
3
10
2
11
1
8
2
2
3
6
3