18
Responsive Column Layouts
Escrito en Noticias web> Programación web por
0
Normalmente, para crear un diseño en columnas, habÃa que añadir clases para resetear los margenes, y las posiciones de los elementos html. Hoy voy a compartir un truco muy simple CSS para crear un diseño en columnas utilizando n-ésimo tipos de pseudo clases. Este truco se usa para codificar los temas de WordPress en Themify. No requiere ninguna clase inicialmente y el número de columnas se puede ajustar en base a la ventana. En otras palabras, se puede alternar un diseño de 4-columna a 3-columna o 2-columna, etc
Ver demo de Responsive Column/Grid
El inconveniente de utilizar clases .primera y .ultima
Normalmente nos gustarÃa añadir una primera o última clase para despejar el espacio de margen o flotan en nuestro array.  Pero añadir la primera clase y la última es muy tedioso, por no hablar de que la cosa se complica si necesitamos para que sea dinámico.
El uso n-ésimo de tipos
El: nth-of-tipo (An + B) expresión hace que sea muy fácil para limpiar el float y el margen sin tener que agregar la clase primera o última…
Por ejemplo:
.grid4 .col:nth-of-type(4n+1)
= target every 4th .col element, starting from the first.grid3 .col:nth-of-type(3n+1)
= target every 3rd .col element, starting from the first.grid2 .col:nth-of-type(2n+1)
= select every 2th .col element, starting from the first

.grid4 .col:nth-of-type(4n+1), .grid3 .col:nth-of-type(3n+1), .grid2 .col:nth-of-type(2n+1) { margin-left: 0; clear: left; }
Hacer esto flexible con Media Queries
Para hacer esto flexible y usable, usamos valores en porcentaje en vez de valores en pixeles.
/* col */Â
.col { background: #eee; float: left; margin-left: 3.2%; margin-bottom: 30px; }
/* grid4 col */Â
.grid4 .col { width: 22.6%; }
/* grid3 col */Â
.grid3 .col { width: 31.2%; }
/* grid2 col */Â
.grid2 .col { width: 48.4%; }
Cambiamos From 4-column por 3-Column
Para cambiar de 4-column a 3-column en anchura de ventanas que sean menores de 740px:
- cambiar el .grid4 .col width por 31.2%Â (un tercio de ancho)
- restablecer el margen izquierdo y propiedad clear
- a continuación, volver a aplicar el margen izquierdo y propiedad clear usando n-ésimo de tipo (3n +1) para formar una cuadrÃcula de 3 columnas

@media screen and (max-width: 740px)Â
{ .grid4 .col { width: 31.2%; }Â
.grid4 .col:nth-of-type(4n+1)Â
{ margin-left: 3.2%; clear: none; }Â
.grid4 .col:nth-of-type(3n+1)Â
{ margin-left: 0; clear: left; } }
Cambio de 4-columna y columna 3-a 2-columna
Para cambiar la 4-column 3 y column a 2-column en anchura de ventana gráfica de menos de 600px:  básicamente hay que utilizar el mismo truco como anteriormente para restablecer la anchura y col float,…
@media screen and (max-width: 600px)Â
{ /* change grid4 to 2-column */ .grid4 .col { width: 48.4%; }
.grid4 .col:nth-of-type(3n+1) { margin-left: 3.2%; clear: none; }
.grid4 .col:nth-of-type(2n+1) { margin-left: 0; clear: left; }
/* change grid3 to 2-column */ .grid3 .col { width: 48.4%; }
.grid3 .col:nth-of-type(3n+1) { margin-left: 3.2%; clear: none; }
.grid3 .col:nth-of-type(2n+1) { margin-left: 0; clear: left; } }
Hacer todas las columnas ventana completa (ver demo)
Para hacer todas las columnas de el ancho completo de la ventana menor a 400 px, configuramos el ancho a 100% y reseteamos el margen y el float,
@media screen and (max-width: 400px) { .col { width: 100% !important; margin-left: 0 !important; clear: none !important; } }
Problemas en Internet Explorer
Ambos puntos de los medios y de n-ésimo de tipo A no son compatibles con Internet Explorer 8 o superiores. Puede utilizar selectivizr.js para proporcionar nth-of-tipo soporte para IE y respond.js para las consultas de los medios. Desafortunadamente, selectivizr.js y respond.js no funcionan bien juntos (es decir, n-ésimo de tipo no funciona dentro de las preguntas de los medios).