Dic
18

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.

 

primera y última clase css

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

 

clear posts

 

.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

 

responsive columns

 

@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).

Fecha de edicin: 18 Diciembre, 2012 - Tags: , , , , , ,

Leave a Reply

You must be logged in to post a comment.