designFlonCSSv2.0.0

Utilities

Grid - Span

/path/to/floncss/trumps/grid/grid.css

グリッドアイテムの横幅や縦幅を制御するためのutility classです。
grid や grid-cols:2 などのutility classと組み合わせて利用します。

ClassPropertiesDescription
grid span
grid-column: auto;
grid-column: span 1 / span 1; grid-row: span 1 / span 1;グリッドアイテムが横/縦方向に1列分の幅を占めるように設定されます。
grid-column: span 2 / span 2; grid-row: span 2 / span 2;グリッドアイテムが横/縦方向に2列分の幅を占めるように設定されます。
grid-column: span 3 / span 3; grid-row: span 3 / span 3;グリッドアイテムが横/縦方向に3列分の幅を占めるように設定されます。
grid-column: span 4 / span 4; grid-row: span 4 / span 4;グリッドアイテムが横/縦方向に4列分の幅を占めるように設定されます。
grid-column: span 5 / span 5; grid-row: span 5 / span 5;グリッドアイテムが横/縦方向に5列分の幅を占めるように設定されます。
grid-column: span 6 / span 6; grid-row: span 6 / span 6;グリッドアイテムが横/縦方向に6列分の幅を占めるように設定されます。
grid-column: span 7 / span 7; grid-row: span 7 / span 7;グリッドアイテムが横/縦方向に7列分の幅を占めるように設定されます。
grid-column: span 8 / span 8; grid-row: span 8 / span 8;グリッドアイテムが横/縦方向に8列分の幅を占めるように設定されます。
grid-column: span 9 / span 9; grid-row: span 9 / span 9;グリッドアイテムが横/縦方向に9列分の幅を占めるように設定されます。
grid-column: span 10 / span 10; grid-row: span 10 / span 10;グリッドアイテムが横/縦方向に10列分の幅を占めるように設定されます。
grid-column: span 11 / span 11; grid-row: span 11 / span 11;グリッドアイテムが横/縦方向に11列分の幅を占めるように設定されます。
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>