Utilities
Grid - Subgrid
/path/to/floncss/trumps/grid/grid.css
subgrid を制御するためのutility classです。
グリッドを入れ子にして、親のグリッドに子のグリッドアイテムを整列させることが可能です。
grid や grid-cols:2 などのutility classと組み合わせて利用します。
| Class | Properties | Description |
|---|---|---|
| grid-cols:subgrid | grid-template-columns: subgrid; | 横方向のsubgridを利用します。 |
| grid-rows:subgrid | grid-template-rows: subgrid; | 縦方向のsubgridを利用します。 |
Useage
Column
grid grid-cols:subgrid col-span:4
Header, Header, Header
Body
Footer, Footer
grid grid-cols:subgrid col-span:4
Header
Body, Body, Body, Body
Footer
grid grid-cols:subgrid col-span:4
Header
Body, Body
Footer
1<div class="grid grid-cols:3 gap">
2 <div class="grid gap:xs grid-cols:subgrid col-span:4">
3 <p>Label</p>
4 <div>Header</div>
5 <div>Body</div>
6 <div>Footer</div>
7 </div>
8
9 <div class="grid gap:xs grid-cols:subgrid col-span:4">
10 <p>Label</p>
11 <div>Header</div>
12 <div>Body</div>
13 <div>Footer</div>
14 </div>
15
16 <div class="grid gap:xs grid-cols:subgrid col-span:4">
17 <p>Label</p>
18 <div>Header</div>
19 <div>Body</div>
20 <div>Footer</div>
21 </div>
22</div>Row
grid grid-rows:subgrid row-span:4
Header
Header
Header
Header
Header
Header
Header
Body
Footer
Footer
Footer
Footer
Footer
grid grid-rows:subgrid row-span:4
Header
Body
Body
Body
Body
Body
Footer
grid grid-rows:subgrid row-span:4
Header
Body
Body
Body
Footer
1<div class="grid grid-cols:3 gap">
2 <div class="grid gap:xs grid-rows:subgrid row-span:4">
3 <p>Label</p>
4 <div>Header</div>
5 <div>Body</div>
6 <div>Footer</div>
7 </div>
8
9 <div class="grid gap:xs grid-rows:subgrid row-span:4">
10 <p>Label</p>
11 <div>Header</div>
12 <div>Body</div>
13 <div>Footer</div>
14 </div>
15
16 <div class="grid gap:xs grid-rows:subgrid row-span:4">
17 <p>Label</p>
18 <div>Header</div>
19 <div>Body</div>
20 <div>Footer</div>
21 </div>
22</div>