Utilities
Columns
/path/to/floncss/trumps/columns/columns.css
display: flex; を用いたカラムレイアウトを構築します。
12カラムのグリッドシステムを採用し、レスポンシブに対応させることで様々なレイアウトを構築することができます。
また、utility classの “gap” や “row-gap” と組み合わせることでカラム間ギャップを細かく設定することができます。
| Class | Properties | Description |
|---|---|---|
| cols | --column-gap: 0; --column-item: calc((100% + var(--column-gap)) / 12); display: flex; flex-wrap: wrap; column-gap: var(--column-gap); row-gap: var(--row-gap, var(--column-gap)); | |
| cols:1 | width: calc(var(--column-item) - var(--column-gap)); | 横幅 100% に対する 1/12 の数値が適用されます。 |
| cols:2 | --column-2: calc(var(--column-item) * 2 - var(--column-gap)) | 横幅 100% に対する 2/12 の数値が適用されます。 |
| cols:3 | --column-3: calc(var(--column-item) * 3 - var(--column-gap)) | 横幅 100% に対する 3/12 の数値が適用されます。 |
| cols:4 | --column-4: calc(var(--column-item) * 4 - var(--column-gap)) | 横幅 100% に対する 4/12 の数値が適用されます。 |
| cols:5 | --column-5: calc(var(--column-item) * 5 - var(--column-gap)) | 横幅 100% に対する 5/12 の数値が適用されます。 |
| cols:6 | --column-6: calc(var(--column-item) * 6 - var(--column-gap)) | 横幅 100% に対する 6/12 の数値が適用されます。 |
| cols:7 | --column-7: calc(var(--column-item) * 7 - var(--column-gap)) | 横幅 100% に対する 7/12 の数値が適用されます。 |
| cols:8 | --column-8: calc(var(--column-item) * 8 - var(--column-gap)) | 横幅 100% に対する 8/12 の数値が適用されます。 |
| cols:9 | --column-9: calc(var(--column-item) * 9 - var(--column-gap)) | 横幅 100% に対する 9/12 の数値が適用されます。 |
| cols:10 | --column-10: calc(var(--column-item) * 10 - var(--column-gap)) | 横幅 100% に対する 10/12 の数値が適用されます。 |
| cols:11 | --column-11: calc(var(--column-item) * 11 - var(--column-gap)) | 横幅 100% に対する 11/12 の数値が適用されます。 |
| cols:12 | --column-12: calc(var(--column-item) * 12 - var(--column-gap)) | 横幅 100% に対する 12/12 の数値が適用されます。 |
| cols:flex | flex: 1; | flex: 1; が適用されます。横幅を指定せず成り行きにする場合に利用します。 |
Useage
col:2
col:2
col:2
col:2
col:2
col:2
col:6
col:6
col:3
col:5
col:4
col:9
col:3
1<div class="cols gap:xs gap@md row-gap:sm">
2 <div class="cols:2">col:2</div>
3 <div class="cols:2">col:2</div>
4 <div class="cols:2">col:2</div>
5 <div class="cols:2">col:2</div>
6 <div class="cols:2">col:2</div>
7 <div class="cols:2">col:2</div>
8
9 <div class="cols:6">col:6</div>
10 <div class="cols:6">col:6</div>
11
12 <div class="cols:3">col:3</div>
13 <div class="cols:5">col:5</div>
14 <div class="cols:4">col:4</div>
15
16 <div class="cols:9">col:9</div>
17 <div class="cols:3">col:3</div>
18</div>