執筆中のため、情報が古い・足りない場合があります。ご容赦ください。
グリッドシステム
Bootstrapのグリッドシステムに近いものを提供します。
例
1/3
2/3
3/3
1/4
2/4
3/4
4/4
<div class="row">
<div class="col-4">
<div class="card ma-1 pa-2">1/3</div>
</div>
<div class="col-4">
<div class="card ma-1 pa-2">2/3</div>
</div>
<div class="col-4">
<div class="card ma-1 pa-2">3/3</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="card ma-1 pa-2">1/2</div>
</div>
<div class="col-6">
<div class="card ma-1 pa-2">2/2</div>
</div>
</div>col-*クラスに1から12の数値指定をしたカラムを、rowクラスの子要素とすることで、グリッドレイアウトを実現します。横列が合計12になるようにすることできっちり1列に並びますが、余剰分は次の行に移動します。
レスポンシブ
タブレット、PCの場合に設定をオーバーライドできます。タブレット向けに指定する場合はtab-*クラス、PC向けの場合はpc-*クラスを追加します。
以下の例は、40個の要素をスマホでは2つ、タブレットでは4つ、PCでは6つ横並びにします。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<div class="row">
<div class="col-6 tab-3 pc-2">
<div class="ma-1 pa-2">1</div>
</div>
<div class="col-6 tab-3 pc-2">
<div class="ma-1 pa-2">2</div>
</div>
<div class="col-6 tab-3 pc-2">
<div class="ma-1 pa-2">3</div>
</div>
︙
</div>