Grid Layouts

Grids can also be useful. Let's jump right into it with what the code looks like:

grid MyGridStyle [ --attributes
                  ]
    { columns = [ px 100, px 100, px 100, px 100 ]
    , rows =
        [ px 100
        , px 100
        , px 100
        , px 100
        ]
    , cells =
        [ cell
            { start = ( 0, 0 )
            , width = 1
            , height = 1
            , content = el Box [] (text "box")
            }
        , cell
            { start = ( 1, 1 )
            , width = 1
            , height = 2
            , content = el Box [] (text "box")
            }

        ]

    }

The first thing we do with a grid, is to declare the sizes of the columns and rows.

Then, when we specify the children, we need to specify where on the grid they live.

We do this with cell, which gives the starting point, as well as how many horizontal and vertical cells they should take up.

Note: Behind the scenes this uses CSS grid, which generally has pretty good support, but you might want to double check that it matches your needs.