Materializar - Cuadrículas

Materialise proporciona una rejilla de respuesta de fluido de 12 columnas.

Utiliza las clases de estilo de fila y columna para definir filas y columnas respectivamente.

No Señor.	Nombre y descripción de la clase
1	row Especifica un contenedor sin relleno que se utilizará para columnas receptivas. Esta clase es obligatoria para que las clases receptivas respondan plenamente.
2	col Especifica una columna con subclases.

col tiene varias subclases destinadas a diferentes tipos de pantallas.

Columnas para dispositivos de pantalla pequeña

A continuación se muestra una lista de estilos a nivel de columna para dispositivos de pantalla pequeña, generalmente teléfonos inteligentes.

No Señor.	Nombre y descripción de la clase
1	s1 Define 1 de 12 columnas con un ancho de 08,33%.
2	s2 Define 2 de 12 columnas con un ancho de 16,66%.
3	s3 Define 3 de 12 columnas con un ancho de 25,00%.
4	s4 Define 4 de 12 columnas con un ancho de 33,33%.
s5 - s11
12	s12 Define 12 de 12 columnas con un ancho del 100%. Clase predeterminada para teléfonos de pantalla pequeña.

Columnas para dispositivos de pantalla mediana

A continuación, se muestra una lista de estilos a nivel de columna para dispositivos de pantalla mediana, generalmente tabletas.

No Señor.	Nombre y descripción de la clase
1	m1 Define 1 de 12 columnas con un ancho de 08,33%
2	m2 Define 2 de 12 columnas con un ancho de 16,66%.
3	m3 Define 3 de 12 columnas con un ancho de 25,00%.
4	m4 Define 4 de 12 columnas con un ancho de 33,33%.
m5 - m11
12	m12 Define 12 de 12 columnas con un ancho del 100%. Clase predeterminada para teléfonos de pantalla media.

Columnas para dispositivos de pantalla grande

A continuación se muestra una lista de estilos a nivel de columna para dispositivos de pantalla grande, por lo general, computadoras portátiles.

No Señor.	Nombre y descripción de la clase
1	l1 Define 1 de 12 columnas con un ancho de 08,33%.
2	l2 Define 2 de 12 columnas con un ancho de 16,66%.
3	l3 Define 3 de 12 columnas con un ancho de 25,00%.
4	l4 Define 4 de 12 columnas con un ancho de 33,33%.
l5 - l11
12	l12 Define 12 de 12 columnas con un ancho del 100%. Clase predeterminada para dispositivos de pantalla grande.

Uso

Cada subclase determina el número de columnas de la cuadrícula que se utilizarán según el tipo de dispositivo. Considere el siguiente fragmento de HTML.

<div class = "row">
   <div class = "col s2 m4 l3">
      <p>This text will use 2 columns on a small screen, 4 on a medium screen, and 3 on
      a large screen.</p>
   </div>
</div>

Las columnas predeterminadas que se utilizarán son 12 en un dispositivo, si no se menciona una subclase en el atributo de clase de un elemento HTML.

Ejemplo

materialize_grids.htm

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Grids Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>             
   </head>
   
   <body>
      <div class = "teal">
         <h2>Mobile First Design Demo</h2>
         <p>Resize the window to see the effect!</p>
      </div>
      
      <hr/> 
      <div class = "row">
         <div class = "col m1 grey center">1</div>
         <div class = "col m1 center">2</div>
         <div class = "col m1 grey center">3</div>
         <div class = "col m1 center">4</div>
         <div class = "col m1 grey center">5</div>
         <div class = "col m1 center">6</div>
         <div class = "col m1 center grey">7</div>
         <div class = "col m1 center">8</div>
         <div class = "col m1 center grey">9</div>
         <div class = "col m1 center">10</div>
         <div class = "col m1 center grey">11</div>
         <div class = "col m1 center">12</div>
      </div>
      
      <div class = "row">
         <div class = "col m4 l3 yellow">
            <p>This text will use 12 columns on a small screen, 4 on a medium screen (m4),
               and 3 on a large screen (l3).</p>
         </div>
         
         <div class = "col s4 m8 l9 grey">  
            <p>This text will use 4 columns on a small screen (s4), 8 on a medium screen
               (m8), and 9 on a large screen (l9).</p>
         </div>
      </div>
   </body>
</html>

Resultado

Verifique el resultado.

↰ Previous page Next page ↱