Material Design Lite Grids - Material Design Lite

What are Material Design Lite Grids?

The Material Design Lite (MDL) grid is a component used to layout the content for varying screen sizes. The MDL grid is defined and enclosed by a container/div element. Usually a grid has 12 columns in the desktop size screen, 8 in the tablet size screen, and 4 in the phone size screen. Each grid size certain margins and gutters. Cells are laid out in sequential manner in a row, in the order they are defined, with following exceptions:
  • If a grid cell is not fit for the row in one of the screen sizes, it flows into the following line.
  • If a grid cell has a specified column size equal to or larger than the number of columns for the screen size, it takes up entire row.
The MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the grid. Following table explains about the available classes and their effects.
S.N.
Class Name & Description
1
mdl-layout
Identifies a container as an MDL component. Required on outer container element.
2
mdl-grid
To Identify a container as an MDL grid component. Requiring to be on "outer" div element.
3
mdl-cell
To Identify a container as an MDL cell. Requiring to be on "inner" div elements.
4
mdl-grid--no-spacing
To update the grid cells to have no margin between them. Optional for grid container.
5
mdl-cell--N-col
To put the column size for the cell to N, N is 1-12 inclusive, defaults to 4; optional for "inner" div elements.
6
mdl-cell--N-col-desktop
To put the column size for the cell to N in desktop mode only, N is 1-12 inclusive; optional for "inner" div elements.
7
mdl-cell--N-col-tablet
To put the column size for the cell to N in tablet mode only, N is 1-8 inclusive; optional for "inner" div elements.
8
mdl-cell--N-col-phone
To put the column size for the cell to N in phone mode only, N is 1-4 inclusive; optional for "inner" div elements.
9
mdl-cell--hide-desktop
To hide the cell when in desktop mode. Optional for "inner" div elements.
10
mdl-cell--hide-tablet
To hide the cell when in tablet mode. Optional for "inner" div elements.
11
mdl-cell--hide-phone
To hide the cell when in phone mode. Optional for "inner" div elements.
12
mdl-cell--stretch
To stretch the cell vertically to fill the parent, default; optional for "inner" div elements.
13
mdl-cell--top
To align the cell to the top of the parent. Optional for "inner" div elements.
14
mdl-cell--middle
To align the cell to the middle of the parent. Optional for "inner" div elements.
15
mdl-cell--bottom
To align the cell to the bottom of the parent. Optional for "inner" div elements.

Example

Below example explains the use of mdl-grid class to layout contents on various screens.
Following MDL classes are used.
  • mdl-layout - Identifies a div as an MDL component.
  • mdl-js-layout - Adds basic MDL behavior to outer div.
  • mdl-layout--fixed-header - Makes the header always visible, even in small screens.
  • mdl-layout__header-row - Identifies container as MDL header row.
  • mdl-layout__drawer - Identifies div as MDL layout drawer.
  • mdl-layout-title - Identifies layout title text.
  • mdl-navigation - Identifies div as MDL navigation group.
  • mdl-navigation__link - Identifies anchor as MDL navigation link.
  • mdl-layout__content - Identifies div as MDL layout content.
  • mdl-grid - Identifies div as an MDL grid component.
  • mdl-cell - Identifies div as MDL cell.
  • mdl-cell--1-col - Sets the column size for the cell to that of 1 cell out of 12 cells in desktop screen size.
  • mdl-cell--2-col - Sets the column size for the cell to that of 2 cell out of 12 cells in desktop screen size.
  • mdl-cell--4-col - Sets the column size for the cell to that of 4 cell out of 12 cells in desktop screen size.
  • mdl-cell--6-col - Sets the column size for the cell to that of 6 cell out of 12 cells in desktop screen size.
  • mdl-cell--4-col-phone - Sets the column size for the cell to that of 4 cell out of 4 cells in phone screen size.
  • mdl-cell--6-col-tablet - Sets the column size for the cell to that of 6 cell out of 8 cells in tablet screen size.
  • mdl-cell--8-col-tablet - Sets the column size for the cell to that of 8 cell out of 8 cells in tablet screen size.
mdl_grid.htm

Result

Verify the result.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Material Design Lite Topics