Search within TutorialsPark

MDL : Grids


How to use MDL - Material Design Lite to Create Grid Layouts


Material Design Lite (MDL) : Grids

Material Design Lite(MDL) component grids provides a way to create layouts from multiple types of display sizes.

Creating Multiple layout for different screen sizes manually using CSS styles is difficult, MDL grid component reduces this workload by providing layouts for all types of screens.

A Container is used to Define each MDL grid.MDL Grids have different no of cells for each screen size.

DESKTOP : For Desktop sized Display, the no of columns available are 12

TABLET : For Tablet sized Display, the no of columns available are 8

PHONE : For handheld phone sized Display, the no of columns available are 4

All Grids have predefined padding, margins and gutters.The Grid Cells are displayed in sequential order, i.e the order in which they appear in the code.

Material Design Lite(MDL) Layout : Grids

A MDL Grid Layouts are created using the class mdl-grid to create the grid container.

Each Cell is created using the class mdl-cell.

Single Column layout is created using class mdl-cell--1-col, and similarly mdl-cell--N-col for cells with N no of Columns.

The Class mdl-cell--8-col-tablet is used to create a 8 column grid for tablet only.

Similarly, the class mdl-cell--4-col-phone is used to create a 4 column grid for phone display

Example: Material Design Lite (MDL) Grids

Give it a TRY! » Note:Expand and shrink the display size to see the effects.


Material Design Lite(MDL) : Desktop and Mobile Grids

A Material Design Grid Layout for Multiple Sized screen, using class mdl-cell--N-col

Example: Material Design Lite (MDL) Desktop and Mobile Grids

Give it a TRY! » Note:The grids are shrinked and expanded based on the size of display


Material Design Lite : Navigation Layout Classes

MDL Class Description
mdl-grid To Define a div element as a Container of Navigation layout
mdl-cell To Assign a MDL behaviour to layout component.
mdl-grid--no-spacing To Define a Container of the Layout Header.
mdl-cell--N-col To Set the icon of the menu, icon is hidden complete menu is visible.
mdl-cell--N-col-desktop To Create a Container of MDL header row
mdl-cell--N-col-tablet To Define the layout's title text.
mdl-cell--N-col-phone To Insert a spacer within the layout.
mdl-cell--hide-desktop When used, hides grid cells displayed in desktop sized screen.
mdl-cell--hide-tablet Used to hide grid cells when displayed in tablet sized mode.
mdl-cell--hide-phone Used to hide grid cells when displayed in phone sized display.
mdl-cell--stretch When used, the cell is stretched vertically filling the parent.
mdl-cell--top To Align the grid cell to the top of the parent.
mdl-cell--middle To Align the grid cell to the middle of the parent
mdl-cell--bottom To Align the grid cell at the bottom of the parent