Introduction

The Material Design Lite (MDL) grid component is a simplified method for laying out content for multiple screen sizes. It reduces the usual coding burden required to correctly display blocks of content in a variety of display conditions.

The MDL grid is defined and enclosed by a container element. A grid has 12 columns in the desktop screen size, 8 in the tablet size, and 4 in the phone size, each size having predefined margins and gutters. Cells are laid out sequentially in a row, in the order they are defined, with some exceptions:

  • If a cell doesn't fit in the row in one of the screen sizes, it flows into the following line.
  • If a cell has a specified column size equal to or larger than the number of columns for the current screen size, it takes up the entirety of its row.

You can set a maximum grid width, after which the grid stays centered with padding on either side, by setting its max-width CSS property.

Grids are a fairly new and non-standardized feature in most user interfaces, and provide users with a way to view content in an organized manner that might otherwise be difficult to understand or retain. Their design and use is an important factor in the overall user experience.

To include an MDL grid component:

 1. Code a <div> element; this is the "outer" container, intended to hold all of the grid's cells. Style the div as desired (colors, font size, etc.).

<div>
</div>

 2. Add the mdl-grid MDL class to the div using the class attribute.

<div class="mdl-grid">
</div>

 3. For each cell, code one "inner" div, including the text to be displayed.

<div class="mdl-grid">
  <div>Content</div>
  <div>goes</div>
  <div>here</div>
</div>

 4. Add the mdl-cell class and an mdl-cell--COLUMN-col class, where COLUMN specifies the column size for the cell, to the "inner" divs using the class attribute.

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--4-col">Content</div>
  <div class="mdl-cell mdl-cell--4-col">goes</div>
  <div class="mdl-cell mdl-cell--4-col">here</div>
</div>

 5. Optionally add an mdl-cell--COLUMN-col-DEVICE class, where COLUMN specifies the column size for the cell on a specific device, and DEVICE specifies the device type.

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet">Content</div>
  <div class="mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet">goes</div>
  <div class="mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet">here</div>
</div>

The grid component is ready for use.

Examples

A grid with five cells of column size 1.

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--1-col">CS 1</div>
  <div class="mdl-cell mdl-cell--1-col">CS 1</div>
  <div class="mdl-cell mdl-cell--1-col">CS 1</div>
  <div class="mdl-cell mdl-cell--1-col">CS 1</div>
  <div class="mdl-cell mdl-cell--1-col">CS 1</div>
</div>

A grid with three cells, one of column size 6, one of column size 4, and one of column size 2.

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--6-col">CS 6</div>
  <div class="mdl-cell mdl-cell--4-col">CS 4</div>
  <div class="mdl-cell mdl-cell--2-col">CS 2</div>
</div>

A grid with three cells of column size 6 that will display as column size 8 on a tablet device.

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet">CS 6 (8 on tablet)</div>
  <div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet">CS 6 (8 on tablet)</div>
  <div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet">CS 6 (8 on tablet)</div>
</div>

A grid with four cells of column size 2 that will display as column size 4 on a phone device.

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-phone">CS 2 (4 on phone)</div>
  <div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-phone">CS 2 (4 on phone)</div>
  <div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-phone">CS 2 (4 on phone)</div>
  <div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-phone">CS 2 (4 on phone)</div>
</div>

Configuration options

The MDL CSS classes apply various predefined visual enhancements and behavioral effects to the grid. The table below lists the available classes and their effects.

MDL classEffectRemarks
mdl-gridDefines a container as an MDL grid componentRequired on "outer" div element
mdl-cellDefines a container as an MDL cellRequired on "inner" div elements
mdl-grid--no-spacingModifies the grid cells to have no margin between them.Optional on grid container.
mdl-cell--N-colSets the column size for the cell to NN is 1-12 inclusive, defaults to 4; optional on "inner" div elements
mdl-cell--N-col-desktopSets the column size for the cell to N in desktop mode onlyN is 1-12 inclusive; optional on "inner" div elements
mdl-cell--N-col-tabletSets the column size for the cell to N in tablet mode onlyN is 1-8 inclusive; optional on "inner" div elements
mdl-cell--N-col-phoneSets the column size for the cell to N in phone mode onlyN is 1-4 inclusive; optional on "inner" div elements
mdl-cell--N-offsetAdds N columns of whitespace before the cellN is 1-11 inclusive; optional on "inner" div elements
mdl-cell--N-offset-desktopAdds N columns of whitespace before the cell in desktop modeN is 1-11 inclusive; optional on "inner" div elements
mdl-cell--N-offset-tabletAdds N columns of whitespace before the cell in tablet modeN is 1-7 inclusive; optional on "inner" div elements
mdl-cell--N-offset-phoneAdds N columns of whitespace before the cell in phone modeN is 1-3 inclusive; optional on "inner" div elements
mdl-cell--order-NReorders cell to position NN is 1-12 inclusive; optional on "inner" div elements
mdl-cell--order-N-desktopReorders cell to position N when in desktop modeN is 1-12 inclusive; optional on "inner" div elements
mdl-cell--order-N-tabletReorders cell to position N when in tablet modeN is 1-12 inclusive; optional on "inner" div elements
mdl-cell--order-N-phoneReorders cell to position N when in phone modeN is 1-12 inclusive; optional on "inner" div elements
mdl-cell--hide-desktopHides the cell when in desktop modeOptional on "inner" div elements
mdl-cell--hide-tabletHides the cell when in tablet modeOptional on "inner" div elements
mdl-cell--hide-phoneHides the cell when in phone modeOptional on "inner" div elements
mdl-cell--stretchStretches the cell vertically to fill the parentDefault; optional on "inner" div elements
mdl-cell--topAligns the cell to the top of the parentOptional on "inner" div elements
mdl-cell--middleAligns the cell to the middle of the parentOptional on "inner" div elements
mdl-cell--bottomAligns the cell to the bottom of the parentOptional on "inner" div elements