[{"name":"Html.Grid","comment":"\n\n    import Css exposing (..)\n    import Html.Grid as Grid\n    import Html.Styled\n\n    view : Html.Styled.Html msg\n    view =\n        Grid.box\n            [ width (pct 100) ]\n            [ Grid.row\n                []\n                [ Grid.column\n                    []\n                    [ Html.text \"Hello from upper left corner\" ]\n                , Grid.column\n                    []\n                    [ Html.text \"Hello from upper right corner\" ]\n                ]\n            , Grid.row\n                []\n                [ Grid.column\n                    []\n                    [ Html.text \"Hello from lower left corner\" ]\n                , Grid.column\n                    []\n                    [ Html.text \"Hello from lower right corner\" ]\n                ]\n            ]\n\n\n# Row\n\n@docs row\n\n\n# Column\n\n@docs Column, column, mapColumn\n\n\n# Column Styling\n\n@docs columnShrink, exactWidthColumn\n\n\n# Extras\n\n@docs box\n\n\n# Keyed\n\n@docs keyedRow, keyedColumn\n\n","unions":[{"name":"Column","comment":" A Column, a horizontally positioned unit inside a row\n","args":["msg"],"cases":[]}],"aliases":[],"values":[{"name":"box","comment":" 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)`.\n\n    Grid.box\n        [ Css.width (pct 100) ]\n        [ Grid.row [] [ Grid.column [] [] ]\n        , Grid.row [] [ Grid.column [] [] ]\n        ]\n\n","type":"List.List Css.Style -> List.List (Html.Styled.Html msg) -> Html.Styled.Html msg"},{"name":"column","comment":" 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.\n\n    -- columns are styled with the css:\n    --     flex-basis: 100%;\n    --     flex: 1;\n    --     display: flex;\n\n\n\n","type":"List.List Css.Style -> List.List (Html.Styled.Html msg) -> Html.Grid.Column msg"},{"name":"columnShrink","comment":" `Column`s naturally fill up horizontal space. Adding `columnShrink` to a column will make it do the opposite, and shrink by default.\n\n    Grid.row\n        []\n        [ Grid.column\n            []\n            [ searchField model.searchFieldModel ]\n        , Grid.column\n            [ Grid.columnShrink ]\n            [ searchButton \"Search\" SearchClicked ]\n        ]\n\n    -- Will render something like..\n    -- [ --------- <Search field> --------- ] [ Search ]\n    -- |           Column                    | Column  |\n    -- | ---------------------- Row -------------------|\n\n","type":"Css.Style"},{"name":"exactWidthColumn","comment":" `Column`s naturally fill up horizontal space. but if instead you want it to have a specific width, use this\n\n    Grid.row\n        []\n        [ Grid.column\n            -- This column takes up exactly 50% of the rows width\n            [ Grid.exactWidthColumn (pct 50) ]\n            []\n        , Grid.column\n            -- This column takes whatever free horizontal space is available\n            []\n            []\n        , Grid.column\n            -- This column is exactly 100 pixels wide\n            [ Grid.exactWidthColumn (px 100) ]\n            []\n        ]\n\n","type":"Css.LengthOrAuto compatible -> Css.Style"},{"name":"keyedColumn","comment":" 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>] )\n","type":"List.List Css.Style -> List.List ( String.String, Html.Styled.Html msg ) -> Html.Grid.Column msg"},{"name":"keyedRow","comment":" 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>] )\n","type":"List.List Css.Style -> List.List ( String.String, Html.Grid.Column msg ) -> Html.Styled.Html msg"},{"name":"mapColumn","comment":" Just like `Html.map`, except for `Column`\n","type":"(a -> b) -> Html.Grid.Column a -> Html.Grid.Column b"},{"name":"row","comment":" 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.\n\n    -- rows are styled with the css:\n    --     display: flex;\n    --     flex-direction: row;\n\n\n\n","type":"List.List Css.Style -> List.List (Html.Grid.Column msg) -> Html.Styled.Html msg"}],"binops":[]}]