Skip to main content

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.

PixelpxA fixed pixel value that accounts for any dpi scaling
EmemThe em size resolved for this element
ViewportWidthvwThe width of the view that an element belongs to in dpi scaled pixels
ViewportHeightvhThe height of the view that an element belongs to in dpi scaled pixels
MinContentmncntThe minimum size of any content
MaxContentmxcntThe 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
StretchsA portion of 'remaining space' that should be attributed to this element.
ApplicationWidthawThe total width of the root view in dpi scaled pixels.
ApplicationHeightahThe 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

  • 1s The cell should stretch
  • 30px_1s the cell should be at least 30 pixels and then stretch with 1 stretch part
  • 2mxcnt the 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);