Responsive Column Layouts

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.

primera y última clase css

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:

1. cambiar el .grid4 .col width por 31.2% (un tercio de ancho)
2. restablecer el margen izquierdo y propiedad clear
3. 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).