Chadtech / elm-css-grid / 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.col
                []
                [ Html.text "Hello from upper left corner" ]
            , Grid.col
                []
                [ Html.text "Hello from upper right corner" ]
            ]
        , Grid.row
            []
            [ Grid.col
                []
                [ Html.text "Hello from lower left corner" ]
            , Grid.col
                []
                [ Html.text "Hello from lower right corner" ]
            ]
        ]

Row

row : List Css.Style -> List (Col msg) -> Html.Styled.Html msg

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

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

Column


type alias Col msg =
{ styles : List Css.Style
, attrs : List (Html.Styled.Attribute msg)
, body : ColBody msg 
}

A Column, a horizontally positioned unit inside a row

col : List Css.Style -> List (Html.Styled.Html msg) -> Col msg

A column in a row. Give col 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;

mapCol : (a -> b) -> Col a -> Col b

Just like Html.map, except for Col

colWithAttrs : List (Html.Styled.Attribute msg) -> Col msg -> Col msg

Add some Html.Attribute msgs to a Col msg. Mainly useful for adding event handlers like click events.

Column Styling

colShrink : Css.Style

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

Grid.row
    []
    [ Grid.col
        []
        [ searchField model.searchFieldModel ]
    , Grid.col
        [ Grid.colShrink ]
        [ searchButton "Search" SearchClicked ]
    ]

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

exactWidthCol : Css.LengthOrAuto compatible -> Css.Style

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

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

Extras

box : List Css.Style -> List (Html.Styled.Html msg) -> Html.Styled.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.col [] [] ]
    , Grid.row [] [ Grid.col [] [] ]
    ]

Keyed

keyedRow : List Css.Style -> List ( String, Col msg ) -> Html.Styled.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] )

keyedCol : List Css.Style -> List ( String, Html.Styled.Html msg ) -> Col msg

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