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) GridsGive 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 GridsGive it a TRY! » Note:The grids are shrinked and expanded based on the size of display
Material Design Lite : Navigation Layout Classes
|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|