This library provides types and functions for building views with CSS Grid layout.
It depends on the package rtfeldman/elm-css
for constructing styled Html.
gridContainer : SimpleTemplate -> List (Html.Styled.Attribute msg) -> List (CssGrid.Areas.GridAreaElement msg) -> Html.Styled.Html msg
Constructs a div
container which will layout child-elements identified by areas defined in the template-definition(s).
Uses SimpleTemplate
to provide one single layout.
mediaGridContainer : List ResponsiveTemplate -> List (Html.Styled.Attribute msg) -> List (CssGrid.Areas.GridAreaElement msg) -> Html.Styled.Html msg
Constructs a div
container which will layout child-elements identified by areas defined in the template-definition(s).
Uses ResponsiveTemplate
to provide a responsive layout for more than one media device.
GridArea
gridElement : GridArea -> List (Html.Styled.Html msg) -> CssGrid.Areas.GridAreaElement msg
Constructs a Html element with grid-area
Represents simple template for CSS Grid
simpleTemplate : CssGrid.Areas.Areas -> CssGrid.Sizes.Gap -> List CssGrid.Sizes.LengthTemplate -> SimpleTemplate
Constructor function. The resulting value represents a minimal layout definition with areas, grid-gap and grid-template-columns.
A value of this type, when used somewhere inside the view
function, will produce CSS similar to this example:
display: grid;
grid-gap: 20px;
grid-template-columns: 1fr 3fr;
grid-template-areas:
"header header"
"nav nav"
"sidebar content"
"ad footer";
Implicitly, grid-template-rows are defined as needed by the area definition.
See also common layout.
CssGrid.Areas.GridArea
Represents a grid-area, uniquely identified by a name. The name of the grid-area must be unique for the entire view.
gridArea "header"
The resulting GridArea will be appear in the resulting CSS in two places:
grid-area
property in a Html element, which gets its layout from the template-definition.gridArea : String -> GridArea
Constructs a GridArea
( List Css.Media.MediaQuery
, SimpleTemplate
)
A pair of values, defining the media-queries (first value) for the template (second value) to be active.
CssGrid.Sizes.Length
Length with explicit units.
fr : Basics.Float -> Length
A 'fractional' length
px : Basics.Int -> Length
A length in absolute pixels.
CssGrid.Sizes.LengthTemplate
Length with explicit units plus template-specific length-values.
units : Length -> LengthTemplate
Constructs a length from a , which can be used in a template-definition (like grid-template-columns
)
auto : LengthTemplate
The auto
value from CSS Grid.
minmax : Length -> Length -> LengthTemplate
The minmax
function from CSS Grid.
gap : Length -> CssGrid.Sizes.Gap
The gap
function from CSS Grid.