W3.CSS Rejilla fluida receptiva
Cuadrícula receptiva
W3.CSS admite una cuadrícula de fluido sensible de 12 columnas.
¡Cambie el tamaño de la página para ver el efecto!
Esta parte ocupará 12 columnas en pantalla chica, 4 en pantalla mediana y 3 en pantalla grande.
Esta parte ocupará 12 columnas en pantalla chica, 8 en pantalla mediana y 9 en pantalla grande.
Ejemplo
<div class="w3-row">
<div class="w3-col m4 l3">
<p>12 columns on a small screen, 4
on a medium screen, and 3 on a large screen.</p>
</div>
<div class="w3-col m8 l9">
<p>12 columns on a small screen, 8
on a medium screen, and 9 on a large screen.</p>
</div>
</div>
Filas receptivas
El sistema de cuadrícula de W3.CSS responde. Las columnas se reorganizarán automáticamente según el tamaño de la pantalla: en una pantalla grande podría verse mejor con el contenido organizado en tres columnas, pero en una pantalla pequeña sería mejor si el contenido estuviera apilado uno encima del otro.
| Clase | Descripción |
|---|---|
| fila w3 | Contenedor para clases receptivas, sin relleno |
| w3-fila-relleno | Contenedor para clases receptivas, con relleno izquierdo y derecho de 8px |
| w3-col | Define una columna en una cuadrícula receptiva de 12 columnas |
w3-col tiene las siguientes subclases:
Columnas para pantallas pequeñas (típicos teléfonos inteligentes):
| Clase | Descripción |
|---|---|
| s1 | Define 1 de 12 columnas (ancho: 08,33 %) para pantallas pequeñas |
| s2 | Define 2 de 12 columnas (ancho: 16,66%) para pantallas pequeñas |
| s3 | Define 3 de 12 columnas (ancho: 25,00%) para pantallas pequeñas |
| s4 | Define 4 de 12 columnas (ancho: 33,33%) para pantallas pequeñas |
| s5-s11 | |
| s12 | Define 12 de 12 columnas (ancho: 100%). Predeterminado para pantallas pequeñas |
Columnas para pantallas medianas (típicas tabletas):
| Clase | Descripción |
|---|---|
| m1 | Define 1 de 12 columnas (ancho: 08,33%) para pantallas medianas |
| m2 | Define 2 de 12 columnas (ancho: 16,66%) para pantallas medianas |
| m3 | Define 3 de 12 columnas (ancho: 25,00%) para pantallas medianas |
| m4 | Define 4 de 12 columnas (ancho: 33,33%) para pantallas medianas |
| m5-m11 | |
| m12 | Define 12 de 12 columnas (ancho: 100%). Predeterminado para pantallas medianas |
Columnas para pantallas grandes (computadoras portátiles y de escritorio típicas):
| Clase | Descripción |
|---|---|
| l1 | Define 1 de 12 columnas (ancho: 08,33%) para pantallas grandes |
| l2 | Define 2 de 12 columnas (ancho: 16,66%) para pantallas grandes |
| l3 | Define 3 de 12 columnas (ancho: 25,00%) para pantallas grandes |
| l4 | Define 4 de 12 columnas (ancho: 33,33%) para pantallas grandes |
| l5-l11 | |
| l12 | Define 12 de 12 columnas (ancho: 100%). Predeterminado para pantallas grandes) |
Las clases anteriores se pueden combinar para crear diseños más dinámicos y flexibles.
Cada clase se amplía, por lo que si desea establecer el mismo ancho para pantallas pequeñas, medianas y grandes, solo necesita especificar la clase pequeña . Y si desea el mismo ancho en pantallas medianas y grandes, solo necesita especificar la clase media.
Sin embargo, si solo usa clases medianas y/o grandes, el ancho siempre se transformará al 100% en pantallas pequeñas.
Nota: ¡El número de columnas siempre debe sumar 12 para cada fila (6+6, 3+3+6, 9+3, etc.)!
Dos columnas iguales
Dos columnas de igual ancho (50 %/50 %) en todos los tamaños de pantalla:
s6
s6
Ejemplo
<div class="w3-row">
<div class="w3-col s6 w3-green w3-center"><p>s6</p></div>
<div class="w3-col
s6 w3-dark-grey w3-center"><p>s6</p></div>
</div>
Dos columnas desiguales
Dos columnas de ancho desigual (25%/75%) en todos los tamaños de pantalla:
s3
s9
Ejemplo
<div class="w3-row">
<div class="w3-col s3 w3-green w3-center"><p>s3</p></div>
<div class="w3-col
s9 w3-dark-grey w3-center"><p>s9</p></div>
</div>
tres columnas iguales
Tres columnas de igual ancho (33,3 %/33,3 %/33,3 %) en todos los tamaños de pantalla:
s4
s4
s4
Ejemplo
<div class="w3-row">
<div class="w3-col s4 w3-green w3-center"><p>s4</p></div>
<div class="w3-col s4 w3-dark-grey w3-center"><p>s4</p></div>
<div class="w3-col s4
w3-red w3-center"><p>s4</p></div>
</div>
Tres columnas desiguales
Tres columnas de varios anchos (25 %/50 %/25 %) en tabletas, portátiles y equipos de sobremesa. En teléfonos móviles, las columnas se apilarán automáticamente (100% de ancho):
m3
m6
m3
Ejemplo
<div class="w3-row">
<div class="w3-col m3 w3-green w3-center"><p>m3</p></div>
<div class="w3-col
m6 w3-dark-grey w3-center"><p>m6</p></div>
<div class="w3-col
m3
w3-red w3-center"><p>m3</p></div>
</div>
Nota: Este ejemplo es lo mismo que usar w3-cuarto (m3), w3-mitad (m6), w3-cuarto (m3), que aprendió en el capítulo W3.CSS receptivo .
seis columnas
Seis columnas de igual ancho (16 % cada una) en tabletas, computadoras portátiles y de escritorio. En teléfonos móviles, las columnas se apilarán automáticamente (100% de ancho):
m2
m2
m2
m2
m2
m2
Ejemplo
<div class="w3-row">
<div class="w3-col m2 w3-green
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-red
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-blue
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-dark-grey
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-black
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-purple
w3-center"><p>m2</p></div>
</div>
Mixto: Móviles y Laptops
Puede combinar clases para crear un diseño dinámico y flexible. Este ejemplo producirá un diseño de dos columnas con una división del 83,34 %/16,66 % (l10, l2) en pantallas grandes y una división del 50 %/50 % (s6, s6) en pantallas pequeñas:
l10 s6
l2 s6
Ejemplo
<div class="w3-row">
<div class="w3-col l10 s6 w3-pink
w3-center"><p>l10 s6</p></div>
<div class="w3-col l2 s6
w3-dark-grey w3-center"><p>l2 s6</p></div>
</div>
Mixto: Móviles, Tablets y Laptops
Este ejemplo producirá un diseño de tres columnas con una división de 25 %/58,34 %/16,66 % (l3, l7, l2) en pantallas grandes, 50 %/25 %/25 % (m6, m3, m3) dividida en pantallas medianas y un 33,3 %/33,3 %/33,3 % (s4, s4, s4) dividido en pantallas pequeñas:
l3 m6 s4
l7 m3 s4
l2 m3 s4
Ejemplo
<div class="w3-row">
<div class="w3-col l3 m6 s4 w3-green w3-center"><p>l3 m6 s4</p></div>
<div class="w3-col l7 m3 s4
w3-dark-grey w3-center"><p>l7 m3 s4</p></div>
<div class="w3-col l2
m3 s4 w3-red w3-center"><p>l2 m3 s4</p></div>
</div>
Diferencia entre w3-row y w3-row-padding
La clase w3-row define un contenedor sin relleno, mientras que la clase w3-row-padding agrega un relleno izquierdo y derecho de 8px a cada columna:
fila w3:
w3-fila-relleno:
Ejemplo
<div class="w3-row">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col s4"><img src="img_snowtops.jpg"></div>
</div>
<div class="w3-row-padding">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col s4"><img src="img_snowtops.jpg"></div>
</div>
Usando w3-resto
La clase w3-rest es una clase potente y flexible que utilizará lo que queda de la columna de la cuadrícula.
150px
descansar
75px
descansar
100px
100px
descansar
cuarto
80px
descansar
cuarto
cuarto
cuarto
35%
descansar
Ejemplo usando descanso
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest"><p>rest</p></div>
</div>
El elemento que usa class="w3-rest" siempre debe ser el último elemento en el código fuente.
usando porcentaje
Use la propiedad de ancho de CSS para determinar un ancho específico de las columnas.
20%
60%
20%
45%
55%
15%
35%
10%
30%
10%
Ejemplo
<div class="w3-row">
<div class="w3-col
w3-container w3-green"
style="width:20%"><p>20%</p></div>
<div
class="w3-col w3-container w3-blue" style="width:60%"><p>60%</p></div>
<div
class="w3-col w3-container w3-red" style="width:20%"><p>20%</p></div>
</div>