Material design’s responsive UI 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
• Layout Grid
• Cell Spans
• Cell Alignment
• Grid Alignment
• Nested Grid
• Device-Specific Cell Spans
  • Desktop Cell Spans
  • Tablet Cell Spans
  • Phone Cell Spans

Resources

• Demo: Layout Grids
• Material Design Guidelines: Layout Grid
• MDC Web: Layout Grid
• Sass Mixins (MDC Web)

Basic Usage

import Material.LayoutGrid as LayoutGrid
    exposing
        ( layoutGrid
        , layoutGridCell
        , layoutGridInner
        )


main =
    layoutGrid []
        [ layoutGridInner []
            [ layoutGridCell [] []
            , layoutGridCell [] []
            , layoutGridCell [] []
            ]
        ]

Layout Grid

Cell Spans

Cells span by default four columns within the grid. Use one of the following functions to change this behavior.

Cell Alignment

Cells are by default stretched. You can add attributes alignTop, alignMiddle or alignBottom to a cell to change this behavior.

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.

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 layoutGridInner around nested layoutGridCells within an existing layoutGridCell.

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 UX.

layoutGrid []
    [ layoutGridInner []
        [ layoutGridCell []
            [ layoutGridInner []
                [ layoutGridCell [] []
                , layoutGridCell [] []
                ]
            ]
        , layoutGridCell [] []
        ]
    ]

Device-Specific Cell Spans

Desktop Cell Spans

Tablet Cell Spans

Phone Cell Spans