Grid Layout

caution

This document is a WORK IN PROGRESS

A grid is a 2d layout box that works by taking a template definition on the row and column axis Items can be placed explicitly in numbered grid cells or placed implicitly using one of two placement algorithms(explained later)

Grids are fixed in the main axis direction: their cell count will not grow. In the cross axis direction we can place overflow the grid as much as we want and it will adapt to fit.

Items can placed either explicitly by using the GridItem style (syntax = uint span unit, GridItemX = 1 span 3 would mean: Place this in column 1 and span 3 rows (or the opposite if LayoutType = GridVertical)

Grid gap can be achieved via 'HorizontalSpaceBetween' and 'Vertical Space Between'

grid templates can take up to 24 values each value is made up of a unit, a 16bit float value, and a ushort stretch value

parser syntax: 100px_1s 300px

HorizontalWrap

First layout the main axis, if elements do not fit we add a new line box and
continue adding elements until that line is full or we are done. repeat

Because we need to solve the main axis first, we can't resolve aspect locks 
that are locked to the cross axis size. 

SpaceBetween on the cross axis works to like grid gap: we don't put space between
the elements but rather between the layout lines. This means collapsing on the 
cross axis also collapses space not between the elements but between the element
and the spacer size on the cross axis.