elm-ui-grid.elm

module View.Grid exposing (view)

import Element exposing (Element, column, el, fill, row, spacing, width)
import List.Extra


type alias Config =
    { itemsPerRow : Int
    , horizontalSpacing : Int
    , verticalSpacing : Int
    }


view : Config -> List (Element msg) -> Element msg
view config items =
    let
        groups =
            items
                |> padMissing config
                |> List.map cellView
                |> List.Extra.groupsOf config.itemsPerRow
    in
    column [ width fill, spacing config.verticalSpacing ] <|
        List.map (rowView config) groups


rowView : Config -> List (Element msg) -> Element msg
rowView config items =
    row [ width fill, spacing config.horizontalSpacing ] items


padMissing : Config -> List (Element msg) -> List (Element msg)
padMissing config items =
    let
        remainder =
            remainderBy config.itemsPerRow (List.length items)
    in
    items ++ List.repeat remainder Element.none


cellView : Element msg -> Element msg
cellView body =
    el [ width fill ] body

example.elm

    Grid.view
        { rowCount = 3
        , horizontalSpacing = 10
        , verticalSpacing = 10
        }
        [ el [] (text "cell one") 
        , el [] (text "cell two")
        , el [] (text "cell three")
        , el [] (text "cell four")
        ]