Material Design Lite Grids
what is Grid in (MDL) ?
- Material Design Lite(MDL) component grids provide 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 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.
Sample code:
<!-- 12 cell grid -->
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
</div>
<!-- 4 cell grid , 4*3=12 -->
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col">4</div>
<div class="mdl-cell mdl-cell--4-col">4</div>
<div class="mdl-cell mdl-cell--4-col">4</div>
</div>
<!-- 6 cell, 4 cell and 2 cell grid, 6 + 4 + 2 = 12 -->
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--6-col">6</div>
<div class="mdl-cell mdl-cell--4-col">4</div>
<div class="mdl-cell mdl-cell--2-col">2</div>
</div>
<!-- 12 cell grid on Desktop -->
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet">(6 desktop), (8 tablet)</div>
<div class="mdl-cell mdl-cell--4-col mdl-cell--6-col-tablet">(4 desktop), (6 tablet)</div>
<div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-phone">(2 desktop), (4 phone)</div>
</div>
Material Design Lite: Desktop and Mobile Grids
- A Material Design Grid Layout for Multiple Sized screen, using class mdl-cell--N-col
Sample code:
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 |
Fixed Drawer:
- To create a template with fixed drawer but no header 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-drawer - Makes the drawer always visible and open in larger screens.
- 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.