Utilities
Grid - Span
/path/to/floncss/trumps/grid/grid.css
グリッドアイテムの横幅や縦幅を制御するためのutility classです。
grid や grid-cols:2 などのutility classと組み合わせて利用します。
| Class | Properties | Description |
|---|---|---|
| col-span:auto | grid-column: auto; | |
| col-span:1 row-span:1 | grid-column: span 1 / span 1; grid-row: span 1 / span 1; | グリッドアイテムが横/縦方向に1列分の幅を占めるように設定されます。 |
| col-span:2 row-span:2 | grid-column: span 2 / span 2; grid-row: span 2 / span 2; | グリッドアイテムが横/縦方向に2列分の幅を占めるように設定されます。 |
| col-span:3 row-span:3 | grid-column: span 3 / span 3; grid-row: span 3 / span 3; | グリッドアイテムが横/縦方向に3列分の幅を占めるように設定されます。 |
| col-span:4 row-span:4 | grid-column: span 4 / span 4; grid-row: span 4 / span 4; | グリッドアイテムが横/縦方向に4列分の幅を占めるように設定されます。 |
| col-span:5 row-span:5 | grid-column: span 5 / span 5; grid-row: span 5 / span 5; | グリッドアイテムが横/縦方向に5列分の幅を占めるように設定されます。 |
| col-span:6 row-span:6 | grid-column: span 6 / span 6; grid-row: span 6 / span 6; | グリッドアイテムが横/縦方向に6列分の幅を占めるように設定されます。 |
| col-span:7 row-span:7 | grid-column: span 7 / span 7; grid-row: span 7 / span 7; | グリッドアイテムが横/縦方向に7列分の幅を占めるように設定されます。 |
| col-span:8 row-span:8 | grid-column: span 8 / span 8; grid-row: span 8 / span 8; | グリッドアイテムが横/縦方向に8列分の幅を占めるように設定されます。 |
| col-span:9 row-span:9 | grid-column: span 9 / span 9; grid-row: span 9 / span 9; | グリッドアイテムが横/縦方向に9列分の幅を占めるように設定されます。 |
| col-span:10 row-span:10 | grid-column: span 10 / span 10; grid-row: span 10 / span 10; | グリッドアイテムが横/縦方向に10列分の幅を占めるように設定されます。 |
| col-span:11 row-span:11 | grid-column: span 11 / span 11; grid-row: span 11 / span 11; | グリッドアイテムが横/縦方向に11列分の幅を占めるように設定されます。 |
| col-span:12 row-span:12 | grid-column: span 12 / span 12; grid-row: span 12 / span 12; | グリッドアイテムが横/縦方向に12列分の幅を占めるように設定されます。 |
Useage
Column
1
2
3
4
5
6
7
1<div class="grid grid-cols:3 gap">
2 <div>1</div>
3 <div>2</div>
4 <div>3</div>
5 <div class="col-span:2">4</div>
6 <div>5</div>
7 <div>6</div>
8 <div class="col-span:2">7</div>
9</div>Row
1
2
3
4
5
6
7
1<div class="grid grid-cols:3 gap">
2 <div class="row-span:2">1</div>
3 <div>2</div>
4 <div>3</div>
5 <div>4</div>
6 <div class="row-span:2">5</div>
7 <div>6</div>
8 <div>7</div>
9</div>