Material Design Lite – Grids ”; Previous Next The Material Design Lite (MDL) grid is a component for laying out content for varying screen sizes. The MDL grid is defined and enclosed by a container/div element. A grid has 12 columns in the desktop size screen, 8 in the tablet size screen, and 4 in the phone size screen, where each size has predefined 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 the entire row. MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the grid. The following table lists down the available classes and their effects. Sr.No. Class Name & Description 1 mdl-layout Identifies a container as an MDL component. Required on outer container element. 2 mdl-grid Identifies a container as an MDL grid component. Required on “outer” div element. 3 mdl-cell Identifies a container as an MDL cell. Required on “inner” div elements. 4 mdl-grid–no-spacing Updates the grid cells to have no margin between them. Optional for grid container. 5 mdl-cell–N-col This helps 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 This helps 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 This helps 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 This helps 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 Hides the cell when in desktop mode. Optional for “inner” div elements. 10 mdl-cell–hide-tablet Hides the cell when in tablet mode. Optional for “inner” div elements. 11 mdl-cell–hide-phone Hides the cell when in phone mode. Optional for “inner” div elements. 12 mdl-cell–stretch Stretches the cell vertically to fill the parent, default; optional for “inner” div elements. 13 mdl-cell–top Aligns the cell to the top of the parent. Optional for “inner” div elements. 14 mdl-cell–middle Aligns the cell to the middle of the parent. Optional for “inner” div elements. 15 mdl-cell–bottom Aligns the cell to the bottom of the parent. Optional for “inner” div elements. Example The following example will help you understand the use of the mdl-grid class to layout contents on various screens. The MDL classes given below will be used in this example. 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 Live Demo <html> <head> <link rel = “stylesheet” href = “https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css”> <script src = “https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js”> </script> <link rel = “stylesheet” href = “https://fonts.googleapis.com/icon?family=Material+Icons”> <style> .graybox { background-color:#ddd; } </style> </head> <body> <div class = “mdl-layout mdl-js-layout mdl-layout–fixed-header”> <header class = “mdl-layout__header”> <div class = “mdl-layout__header-row”> <span class = “mdl-layout-title”>Material Design Grid</span> </div> </header> <div class = “mdl-layout__drawer”> <span class = “mdl-layout-title”>Material Design Tutorial</span> <nav class = “mdl-navigation”> <a class = “mdl-navigation__link” href = “”>Home</a> <a class = “mdl-navigation__link” href = “”>About</a> </nav> </div> <main class = “mdl-layout__content”> <div class = “mdl-grid”> <div class = “mdl-cell mdl-cell–1-col graybox”>1</div> <div class = “mdl-cell mdl-cell–1-col graybox”>2</div> <div class = “mdl-cell mdl-cell–1-col graybox”>3</div> <div class = “mdl-cell mdl-cell–1-col graybox”>4</div> <div class = “mdl-cell mdl-cell–1-col graybox”>5</div> <div class = “mdl-cell mdl-cell–1-col graybox”>6</div> <div class = “mdl-cell mdl-cell–1-col graybox”>7</div> <div class = “mdl-cell mdl-cell–1-col graybox”>8</div> <div class = “mdl-cell mdl-cell–1-col graybox”>9</div> <div class = “mdl-cell mdl-cell–1-col graybox”>10</div> <div class = “mdl-cell mdl-cell–1-col graybox”>11</div> <div class = “mdl-cell mdl-cell–1-col graybox”>12</div> </div> <div class = “mdl-grid”> <div class = “mdl-cell mdl-cell–4-col graybox”>1</div> <div class = “mdl-cell mdl-cell–4-col graybox”>2</div> <div class = “mdl-cell mdl-cell–4-col graybox”>3</div> </div> <div class = “mdl-grid”> <div class = “mdl-cell mdl-cell–6-col graybox”>6</div> <div class = “mdl-cell mdl-cell–4-col graybox”>4</div> <div class = “mdl-cell mdl-cell–2-col graybox”>2</div> </div> <div class = “mdl-grid”> <div class = “mdl-cell mdl-cell–6-col mdl-cell–8-col-tablet graybox”> 6 on desktop, 8 on tablet</div> <div class = “mdl-cell mdl-cell–4-col mdl-cell–6-col-tablet graybox”> 4 on desktop, 6 on tablet</div> <div class = “mdl-cell mdl-cell–2-col mdl-cell–4-col-phone graybox”> 2 on desktop, 4 on phone</div> </div> </main> </div> </body> </html> Result Verify the result.
Print Page
Previous
Next
Advertisements