Material Design’s responsive user interface is based on a column-variate grid layout: it has 12 columns on desktop, 8 columns on tablet and 4 columns on phone.
Note that you are expected to wrap cells in LayoutGrid.inner
. This has to do
with nesting layout grids, but it is required for flat layout grids as
well.
import Material.LayoutGrid as LayoutGrid
main =
LayoutGrid.layoutGrid []
[ LayoutGrid.inner []
[ LayoutGrid.cell [] []
, LayoutGrid.cell [] []
, LayoutGrid.cell [] []
]
]
layoutGrid : List (Html.Attribute msg) -> List (Html msg) -> Html msg
Layout grid view function
cell : List (Html.Attribute msg) -> List (Html msg) -> Html msg
Layout grid cell view function
inner : List (Html.Attribute msg) -> List (Html msg) -> Html msg
Layout grid inner view function
It is mandatory to wrap cell
s within inner
. This has to do with nesting
layout grids, but it is mandatory for flat layout grids as well.
Cells span by default four columns within the grid. Use one of the following functions to make a cell span more or fewer columns.
span1 : Html.Attribute msg
Change a cell to span one column
span2 : Html.Attribute msg
Change a cell to span two columns
span3 : Html.Attribute msg
Change a cell to span three columns
span4 : Html.Attribute msg
Change a cell to span four columns
span5 : Html.Attribute msg
Change a cell to span five columns
span6 : Html.Attribute msg
Change a cell to span six columns
span7 : Html.Attribute msg
Change a cell to span seven columns
span8 : Html.Attribute msg
Change a cell to span eight columns
span9 : Html.Attribute msg
Change a cell to span nine columns
span10 : Html.Attribute msg
Change a cell to span ten columns
span11 : Html.Attribute msg
Change a cell to span eleven columns
span12 : Html.Attribute msg
Change a cell to span twelve columns
Cells are by default stretched. You can add attributes alignTop
,
alignMiddle
or alignBottom
to a cell to make them not extend beyond their
content and instead specify an alignment.
alignTop : Html.Attribute msg
Aligns a cell to the top
alignMiddle : Html.Attribute msg
Aligns a cell to the middle
alignBottom : Html.Attribute msg
Aligns a cell to the bottom
The layout grid is by default center aligned. You can add attributes
alignLeft
or alignRight
to the layoutGrid
to change this behavior.
Note that effects will only be visible if the layout grid does not span the entire available width.
alignLeft : Html.Attribute msg
Aligns the layout grid to the left
alignRight : Html.Attribute msg
Aligns the layout grid to the right
When your contents need extra structure that cannot be supported by a single
layout grid, you can nest layout grids within each other. To nest layout grid,
add a new inner
around nested cell
s within an existing cell
.
The nested layout grid behaves exactly like when they are not nested, e.g, they have 12 columns on desktop, 8 columns on tablet and 4 columns on phone. They also use the same gutter size as their parents, but margins are not re-introduced since they are living within another cell.
However, the Material Design guidelines do not recommend having a deeply nested grid as it might mean an over complicated user experience.
LayoutGrid.layoutGrid []
[ LayoutGrid.inner []
[ LayoutGrid.cell []
[ LayoutGrid.inner []
[ LayoutGrid.cell [] []
, LayoutGrid.cell [] []
]
]
, LayoutGrid.cell [] []
]
]
span1Desktop : Html.Attribute msg
Change a cell to span one column (desktop only)
span2Desktop : Html.Attribute msg
Change a cell to span two columns (desktop only)
span3Desktop : Html.Attribute msg
Change a cell to span three columns (desktop only)
span4Desktop : Html.Attribute msg
Change a cell to span four columns (desktop only)
span5Desktop : Html.Attribute msg
Change a cell to span five columns (desktop only)
span6Desktop : Html.Attribute msg
Change a cell to span six columns (desktop only)
span7Desktop : Html.Attribute msg
Change a cell to span seven columns (desktop only)
span8Desktop : Html.Attribute msg
Change a cell to span eight columns (desktop only)
span9Desktop : Html.Attribute msg
Change a cell to span nine columns (desktop only)
span10Desktop : Html.Attribute msg
Change a cell to span ten columns (desktop only)
span11Desktop : Html.Attribute msg
Change a cell to span eleven columns (desktop only)
span12Desktop : Html.Attribute msg
Change a cell to span twelve columns (desktop only)
span1Tablet : Html.Attribute msg
Change a cell to span one column (tablet only)
span2Tablet : Html.Attribute msg
Change a cell to span two columns (tablet only)
span3Tablet : Html.Attribute msg
Change a cell to span three columns (tablet only)
span4Tablet : Html.Attribute msg
Change a cell to span four columns (tablet only)
span5Tablet : Html.Attribute msg
Change a cell to span five columns (tablet only)
span6Tablet : Html.Attribute msg
Change a cell to span six columns (tablet only)
span7Tablet : Html.Attribute msg
Change a cell to span seven columns (tablet only)
span8Tablet : Html.Attribute msg
Change a cell to span eight columns (tablet only)
span1Phone : Html.Attribute msg
Change a cell to span one column (phone only)
span2Phone : Html.Attribute msg
Change a cell to span two columns (phone only)
span3Phone : Html.Attribute msg
Change a cell to span three columns (phone only)
span4Phone : Html.Attribute msg
Change a cell to span four columns (phone only)