W3.CSS - Cuadrículas

W3.CSS proporciona una rejilla de respuesta de fluido de 12 columnas.

Utiliza las clases de estilo w3-row y w3-col para definir filas y columnas respectivamente.

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

w3-col tiene varias subclases destinadas a diferentes tipos de pantallas.

Columnas para dispositivos de pantalla pequeña

Aquí hay 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%.
5	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 media, normalmente 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%.
5	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, generalmente computadoras portátiles.

No Señor.	Nombre y descripción de la clase
1	\|1 Define 1 de 12 columnas con un ancho de 08,33%.
2	\|2 Define 2 de 12 columnas con un ancho de 16,66%.
3	\|3 Define 3 de 12 columnas con un ancho de 25,00%.
4	\|4 Define 4 de 12 columnas con un ancho de 33,33%.
5	\|12 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 = "w3-row">
   <div class = "w3-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

w3css_grids.htm

<html>
   <head>
      <title>The W3.CSS Grids</title>
      <meta name = "viewport" content="width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>

   <body>
      <header class = "w3-container w3-teal">
         <h2>Mobile First Design Demo</h2>
         <p class = "w3-large">Resize the window to see the effect!</p>
      </header>
      <div class = "w3-row">
         <div class = "w3-col m1 w3-center w3-grey">1</div>
         <div class = "w3-col m1 w3-center">2</div>
         <div class = "w3-col m1 w3-center w3-grey">3</div>
         <div class = "w3-col m1 w3-center">4</div>
      
         <div class = "w3-col m1 w3-center w3-grey">5</div>
         <div class = "w3-col m1 w3-center">6</div>
         <div class = "w3-col m1 w3-center w3-grey">7</div>
         <div class = "w3-col m1 w3-center">8</div>
      
         <div class = "w3-col m1 w3-center w3-grey">9</div>
         <div class = "w3-col m1 w3-center">10</div>
         <div class = "w3-col m1 w3-center w3-grey">11</div>
         <div class = "w3-col m1 w3-center">12</div>
      </div>
      
      <div class = "w3-row">
         <div class = "w3-col w3-container m4 l3 w3-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 = "w3-col w3-container s4 m8 l9">
            <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

Verifica el resultado.