aforemny / material-components-web-elm / Material.LayoutGrid

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.

Table of Contents

Resources

Basic Usage

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 [] []
            ]
        ]

Layout Grid

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 cells within inner. This has to do with nesting layout grids, but it is mandatory for flat layout grids as well.

Cell Spans

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

Cell Alignment

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

Grid Alignment

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

Nested Grid

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 cells 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 [] []
        ]
    ]

Device-Specific Cell Spans

Desktop Cell Spans

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)

Tablet Cell Spans

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)

Phone Cell Spans

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)