Html.Grid

import Css exposing (..)
import Html.Grid as Grid
import Html.Styled


view : Html.Styled.Html msg
view =
    Grid.box
        [ width (pct 100) ]
        [ Grid.row
            []
            [ Grid.column
                []
                [ Html.text "Hello from upper left corner" ]
            , Grid.column
                []
                [ Html.text "Hello from upper right corner" ]
            ]
        , Grid.row
            []
            [ Grid.column
                []
                [ Html.text "Hello from lower left corner" ]
            , Grid.column
                []
                [ Html.text "Hello from lower right corner" ]
            ]
        ]

Row

row : List Style -> List (Column msg) -> Html msg

A row in a grid. Sequential rows will stack vertically. A row takes a List (Column msg), NOT List (Html msg). Column msg inside the row are arranged horizontally.

-- rows are styled with the css:
--     display: flex;
--     flex-direction: row;

Column

type Column msg

A Column, a horizontally positioned unit inside a row

column : List Style -> List (Html msg) -> Column msg

A column in a row. Give column some html and it positions that html horizontally inside a row. You can also style it, overriding its default styles.

-- columns are styled with the css:
--     flex-basis: 100%;
--     flex: 1;
--     display: flex;

mapColumn : (a -> b) -> Column a -> Column b

Just like Html.map, except for Column

Column Styling

columnShrink : Style

Columns naturally fill up horizontal space. Adding columnShrink to a column will make it do the opposite, and shrink by default.

Grid.row
    []
    [ Grid.column
        []
        [ searchField model.searchFieldModel ]
    , Grid.column
        [ Grid.columnShrink ]
        [ searchButton "Search" SearchClicked ]
    ]


-- Will render something like..
-- [ --------- <Search field> --------- ] [ Search ]
-- |           Column                    | Column  |
-- | ---------------------- Row -------------------|

exactWidthColumn : LengthOrAuto compatible -> Style

Columns naturally fill up horizontal space. but if instead you want it to have a specific width, use this

Grid.row
    []
    [ Grid.column
        -- This column takes up exactly 50% of the rows width
        [ Grid.exactWidthColumn (pct 50) ]
        []
    , Grid.column
        -- This column takes whatever free horizontal space is available
        []
        []
    , Grid.column
        -- This column is exactly 100 pixels wide
        [ Grid.exactWidthColumn (px 100) ]
        []
    ]

Extras

box : List Style -> List (Html msg) -> Html msg

I find that when I write html, many html elements are just containers for other things. Containers either dont get any attributes at all, or just some styling attributes to position them or their content. This is just a helper for those simple containers. A box is supposed to be simple, invisible, and not interactive. It only takes a List Style instead of a List (Attribute msg).

Grid.box
    [ Css.width (pct 100) ]
    [ Grid.row [] [ Grid.column [] [] ]
    , Grid.row [] [ Grid.column [] [] ]
    ]

Keyed

keyedRow : List Style -> List ( String, Column msg ) -> Html msg

The same as a regular row, but with keyed columns ( (See Html.Styled.Keyed for more info)[https://package.elm-lang.org/packages/rtfeldman/elm-css/latest/Html-Styled-Keyed] )

keyedColumn : List Style -> List ( String, Html msg ) -> Column msg

The same as a regular column, but with keyed content ( (See Html.Styled.Keyed for more info)[https://package.elm-lang.org/packages/rtfeldman/elm-css/latest/Html-Styled-Keyed] )

Modules

Html.Grid

Chadtech/elm-css-grid/2.0.3