Rejilla sensible
W3.CSS soporta una rejilla de fluido sensible 12 de la columna.
Cambiar el tamaño de la página para ver el efecto!
Esta parte ocupará 12 columnas en una pantalla pequeña, 4 en una pantalla mediana y 3 en una pantalla grande.
Esta parte ocupará 12 columnas en una pantalla pequeña, 8 en una pantalla mediana y 9 en una 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> Inténtalo tú mismo " Filas de respuesta
sistema de red de W3.CSS es sensible, y las columnas se volverá a organizar de forma automática en función del tamaño de la pantalla: en una pantalla grande que puede verse mejor con el contenido organizado en tres columnas, pero en una pantalla pequeña que sería mejor si el contenido artículos fueron apiladas una encima de la otra.
Las columnas deben residir dentro de una fila para ser totalmente sensible.
| Clase | Descripción |
|---|---|
| W3-fila | Define un recipiente padding-menos para las columnas de respuesta. |
| W3-fila-padding | Define un contenedor acolchado para columnas de respuesta. |
| W3-col | Define una columna con subclases |
W3-col tiene las siguientes subclases:
Columnas para pantallas pequeñas (teléfonos inteligentes) típicos:
| Clase | Descripción |
|---|---|
| s1 | Define 1 de 12 columnas (ancho: 08,33%) para las pequeñas pantallas |
| s2 | Define 2 de 12 columnas (ancho: 16,66%) para las pequeñas pantallas |
| s3 | Define 3 de 12 columnas (ancho: 25.00%) para las pequeñas pantallas |
| s4 | Define 4 de 12 columnas (ancho: 33,33%) para las pequeñas pantallas |
| S5-S11 | |
| s12 | Define 12 de 12 columnas (ancho: 100%). Por defecto para las pequeñas pantallas |
Columnas para pantallas medianas (comprimidos típicos):
| 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 grandes pantallas de los ordenadores portátiles (típico):
| Clase | Descripción |
|---|---|
| l1 | Define 1 de 12 columnas (ancho: 08,33%) para las grandes pantallas |
| l2 | Define 2 de 12 columnas (ancho: 16,66%) para las grandes pantallas |
| L3 | Define 3 de 12 columnas (ancho: 25.00%) para las grandes pantallas |
| l4 | Define 4 de 12 columnas (ancho: 33,33%) para las grandes pantallas |
| L5-l11 | |
| l12 | Define 12 de 12 columnas (ancho: 100%). Predeterminado para las pantallas grandes) |
Las clases anteriores se pueden combinar para crear diseños más dinámica y flexible.
Cada clase se amplía hasta, por lo que si desea establecer la misma anchura para pantallas pequeñas, medianas y grandes, sólo tiene que especificar la clase pequeña. Y si desea que el mismo ancho en pantallas medianas y grandes, sólo tiene que especificar la clase media.
Sin embargo, si sólo utiliza clases de gran tamaño mediano y / o, el ancho será siempre transformar al 100% en pantallas pequeñas.
Nota: El número de columnas siempre debe agregar hasta 12 para cada fila (6 + 6, 3 + 3 + 6, 9 + 3, etc.)!
Dos columnas iguales
Dos columnas de igual anchura (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> Inténtalo tú mismo " Dos columnas desiguales
Dos columnas de anchura 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>s6</p></div>
<div class="w3-col
s9 w3-dark-grey w3-center"><p>s6</p></div>
</div> Inténtalo tú mismo " Tres columnas iguales
Tres columnas de igual anchura (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> Inténtalo tú mismo " Tres columnas desiguales
Tres columnas diferentes de ancho (25% / 50% / 25%) en tabletas, ordenadores portátiles y de escritorio. En los teléfonos móviles, las columnas se apilan automáticamente (ancho 100%):
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> Inténtalo tú mismo " Nota: Este ejemplo es el mismo que usar w3 cuarta parte (m3), W3-media (M6), w3 cuarta parte (m3), lo que has aprendido en el Responsive W3.CSS capítulo.
seis columnas
Seis columnas tengan la misma anchura (16% cada uno) en tabletas, ordenadores portátiles y de escritorio. En los teléfonos móviles, las columnas se apilan automáticamente (ancho 100%):
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> Inténtalo tú mismo " Mixto: móvil y los ordenadores portátiles
Se pueden combinar las clases para crear un diseño dinámico y flexible. En este ejemplo se va a producir un diseño de dos columnas con una fracción de 83,34% / 16,66% (l8, L4) en las pantallas grandes y un 50% / 50% (S6, S6) se dividió en pequeñas pantallas:
l8 s6
l4 s6
Ejemplo
<div class="w3-row">
<div class="w3-col l8 s6 w3-pink
w3-center"><p>l8 s6</p></div>
<div class="w3-col l4 s6
w3-dark-grey w3-center"><p>l4 s6</p></div>
</div> Inténtalo tú mismo " Mixtas: móviles, tablets y portátiles
En este ejemplo se va a producir un diseño de tres columnas con un (L3, L7, L2) dividida al 25% / 58,34% / 16,66% en las pantallas grandes, 50% / 25% / 25% (M6, m3, m3) dividida en las pantallas medianas y una fracción de 33,3% / 33,3% / 33,3% (S4, S4, S4) en pantallas pequeñas:
l3 M6 s4
l7 m3 s4
l2 m3 s4
Ejemplo
<div class="w3-row">
<div class="w3-col l9 m6 s4 w3-green
w3-center"><p>l8 s6</p></div>
<div class="w3-col l2 m3 s4
w3-dark-grey w3-center"><p>l4 s6</p></div>
<div class="w3-col l1
m3 s4 w3-red w3-center"><p>l4 s6</p></div>
</div> Inténtalo tú mismo " Diferencia entre W3-W3 fila y fila-padding
La clase W3-fila define un contenedor acolchado-menos, mientras que la clase W3-fila-padding añade un relleno de 8 píxeles izquierda y derecha de cada columna:
W3-fila:
W3-fila-padding:
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_fjords.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_fjords.jpg"></div>
</div> Inténtalo tú mismo " usando Porcentaje
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> Inténtalo tú mismo " El uso de w3-resto
150px
descanso
75px
descanso
100px
100px
descanso
trimestre
80px
descanso
trimestre
trimestre
trimestre
35%
descanso
Ejemplo utilizando el resto
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest"><p>rest</p></div>
</div> Inténtalo tú mismo "