GridContext

This context interface offers functions to stylegrid layout-cells / child elements.

It does not configure the grid template / container itself. This should be done by GridLayout functions!

This interface offers all the inherited functions of SelfAlignment that corresponds to the CSS alignment module.

This class offers methods for binding a cell or a group of cells to the area template of the grid layout. This is done in two general ways:

• provide specific names for a cell via the area function

• provide patterns with start and end values referring to either names or counting values. This can be done by column or row.

You can define the position of a cell within the grid layout as follows:

// always need a component as child element like ``box``

// named cell approach
box({
    grid { /* it == GridContext.() */
            area { "CONTENT" }
        }
    })

    // pattern approach (
    box({
        grid { /* it == GridContext.() */
            row {
                start { "CONTENT".start } // start at the beginning of the "content" area
                end { "CONTENT".end } // occupy all of the "content" area
            }
            column {
                start { "0" } // start at the beginning of the columns
                end { span(2) } // occupy two columns
            }
        }
    })