Material Design Lite - Cuadrículas

La cuadrícula Material Design Lite (MDL) es un componente para diseñar contenido para diferentes tamaños de pantalla. La cuadrícula MDL está definida y encerrada por un elemento contenedor / div. Una cuadrícula tiene 12 columnas en la pantalla del tamaño del escritorio, 8 en la pantalla del tamaño de la tableta y 4 en la pantalla del tamaño del teléfono, donde cada tamaño tiene márgenes y márgenes predefinidos. Las celdas se disponen de manera secuencial en una fila, en el orden en que están definidas, con las siguientes excepciones:

  • Si una celda de la cuadrícula no se ajusta a la fila en uno de los tamaños de pantalla, fluye a la siguiente línea.

  • Si una celda de la cuadrícula tiene un tamaño de columna especificado igual o mayor que el número de columnas para el tamaño de la pantalla, ocupa toda la fila.

MDL proporciona varias clases de CSS para aplicar varias mejoras visuales y de comportamiento predefinidas a la cuadrícula. La siguiente tabla enumera las clases disponibles y sus efectos.

No Señor. Nombre y descripción de la clase
1

mdl-layout

Identifica un contenedor como un componente MDL. Requerido en el elemento contenedor exterior.
2

mdl-grid

Identifica un contenedor como un componente de cuadrícula MDL. Obligatorio en el elemento div "externo".
3

mdl-cell

Identifica un contenedor como una celda MDL. Obligatorio en elementos div "internos".
4

mdl-grid--no-spacing

Actualiza las celdas de la cuadrícula para que no tengan margen entre ellas. Opcional para contenedor de rejilla.
5

mdl-cell--N-col

Esto ayuda a poner el tamaño de columna de la celda en N, N es 1-12 inclusive, por defecto es 4; opcional para elementos div "internos".
6

mdl-cell--N-col-desktop

Esto ayuda a poner el tamaño de columna de la celda en N solo en modo de escritorio, N es 1-12 inclusive; opcional para elementos div "internos".
7

mdl-cell--N-col-tablet

Esto ayuda a poner el tamaño de columna de la celda en N solo en modo tableta, N es de 1 a 8 inclusive; opcional para elementos div "internos".
8

mdl-cell--N-col-phone

Esto ayuda a poner el tamaño de la columna de la celda en N solo en el modo de teléfono, N es 1-4 inclusive; opcional para elementos div "internos".
9

mdl-cell--hide-desktop

Oculta la celda cuando está en modo de escritorio. Opcional para elementos div "internos".
10

mdl-cell--hide-tablet

Oculta la celda cuando está en modo tableta. Opcional para elementos div "internos".
11

mdl-cell--hide-phone

Oculta el celular cuando está en modo teléfono. Opcional para elementos div "internos".
12

mdl-cell--stretch

Estira la celda verticalmente para llenar el padre, predeterminado; opcional para elementos div "internos".
13

mdl-cell--top

Alinea la celda con la parte superior del padre. Opcional para elementos div "internos".
14

mdl-cell--middle

Alinea la celda a la mitad del padre. Opcional para elementos div "internos".
15

mdl-cell--bottom

Alinea la celda con la parte inferior del padre. Opcional para elementos div "internos".

Ejemplo

El siguiente ejemplo le ayudará a comprender el uso de la clase mdl-grid para diseñar contenidos en varias pantallas.

En este ejemplo se utilizarán las clases MDL que se indican a continuación.

  • mdl-layout - Identifica un div como componente MDL.

  • mdl-js-layout - Agrega el comportamiento básico de MDL al div externo.

  • mdl-layout--fixed-header - Hace que el encabezado esté siempre visible, incluso en pantallas pequeñas.

  • mdl-layout__header-row - Identifica el contenedor como fila de encabezado MDL.

  • mdl-layout__drawer - Identifica div como cajón de diseño MDL.

  • mdl-layout-title - Identifica el texto del título del diseño.

  • mdl-navigation - Identifica div como grupo de navegación MDL.

  • mdl-navigation__link - Identifica el ancla como enlace de navegación MDL.

  • mdl-layout__content - Identifica div como contenido de diseño MDL.

  • mdl-grid - Identifica div como un componente de cuadrícula MDL.

  • mdl-cell - Identifica div como celda MDL.

  • mdl-cell--1-col - Establece el tamaño de columna de la celda en 1 celda de 12 celdas en el tamaño de la pantalla del escritorio.

  • mdl-cell--2-col - Establece el tamaño de la columna de la celda en 2 celdas de 12 celdas en el tamaño de la pantalla del escritorio.

  • mdl-cell--4-col - Establece el tamaño de la columna de la celda en 4 celdas de 12 celdas en el tamaño de la pantalla del escritorio.

  • mdl-cell--6-col - Establece el tamaño de columna de la celda en 6 celdas de 12 celdas en el tamaño de la pantalla del escritorio.

  • mdl-cell--4-col-phone - Establece el tamaño de la columna de la celda en 4 celdas de 4 celdas en el tamaño de la pantalla del teléfono.

  • mdl-cell--6-col-tablet - Establece el tamaño de columna de la celda en 6 celdas de 8 celdas en el tamaño de la pantalla de la tableta.

  • mdl-cell--8-col-tablet - Establece el tamaño de la columna para la celda en 8 celdas de 8 celdas en el tamaño de la pantalla de la tableta.

mdl_grid.htm

<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>

Resultado

Verifique el resultado.