Grid Template
This syntax defines a grid axis and is made up of one or more cell definitions.
The cells themselves are similar to ValueUnit<GridTemplateUnit> syntax.
| Unit | Shorthand | Description |
|---|---|---|
| Pixel | px | A fixed pixel value that accounts for any dpi scaling |
| Em | em | The em size resolved for this element |
| ViewportWidth | vw | The width of the view that an element belongs to in dpi scaled pixels |
| ViewportHeight | vh | The height of the view that an element belongs to in dpi scaled pixels |
| MinContent | mncnt | The minimum size of any content |
| MaxContent | mxcnt | The maximum size of any content |
| Percent | % | A percentage based value, the value that this is relative to changes based on the property usage. See individual properties to see what the % relative value is |
| Stretch | s | A portion of 'remaining space' that should be attributed to this element. |
| ApplicationWidth | aw | The total width of the root view in dpi scaled pixels. |
| ApplicationHeight | ah | The total height of the root view in dpi scaled pixels |
The values for grid cells can also be postfixed with _[number]s to additionally stretch.
Here are some valid grid cells
1sThe cell should stretch30px_1sthe cell should be at least 30 pixels and then stretch with 1 stretch part2mxcntthe cell should be twice the largest element contained by it
A grid template is just a list of cell definitions
style grid {
GridMainAxisTemplate = 12px 1s 32em 10px_2s;
}
Grids can also accept a repeated syntax. The following example repeats two cells of 12px and 1s 10 times.
style grid {
GridMainAxisTemplate = repeat[10](12px 1s);
}