Columnas adaptables con CSS3: uso del selector :nth-child(n)

El selector :nth-child(n) permite seleccionar el "enésimo" elemento hijo dentro de un elemento padre; donde n puede ser un número, una palabra clave o una fórmula. Este selector es en realidad una pseudo-clase CSS3 compatible con todos los navegadores modernos, excepto con IE8 y anteriores (para variar Laughing).

Por ejemplo, para seleccionar el segundo párrafo de un texto lo hacemos con p:nth-child(2). Si deseamos seleccionar el quinto elemento de una lista usamos li:nth-child(5), si queremos seleccionar todos los elementos impares de una lista usaremos li:nth-child(odd) y para seleccionar, de tres en tres, los elementos de una lista lo hacemos con li:nth-child(3n+0). Una vez seleccionados los elementos deseados podemos modificar sus propiedades con reglas CSS.

Veamos cómo podemos aprovechar las propiedades del selector :nth-child(n) para mostrar contenido a 1, 2, 3 ó 4 columnas adaptables automáticamente al ancho de la pantalla del dispositivo que usemos para navegar.

El código HTML muestra un título principal <h1> y un <div class="autowide"> como contenedor principal. Dentro de él hay cuatro <div class="module"> y cada uno de ellos contiene un párrafo con una imagen flotante a la izquierda del texto.

<h1>1, 2, 3 & 4 Columns Responsive Layout</h1>
<div class="autowide">
<div class="module">
<p><img src="http://ximg.es/60/666666/ffffff&text=1" alt="" />Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores sequi sint ipsa alias amet. Numquam voluptatum maiores. Ab repellat dolores quo quas quam quasi voluptatem delectus aperiam. Deleniti accusamus dolore!</p>
</div>
<div class="module">
<p><img src="http://ximg.es/60/666666/ffffff&text=2" alt="" />Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat quis veniam accusantium molestias rerum distinctio a quidem numquam illo veritatis recusandae odit consectetur esse nobis alias earum quia omnis sed!</p>
</div>
<div class="module">
<p><img src="http://ximg.es/60/666666/ffffff&text=3" alt="" />Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem repellendus pariatur esse vel ex iure id sunt voluptatibus atque ut commodi ad aliquam assumenda. Facilis soluta cumque mollitia officiis dolorum!</p>
</div>
<div class="module">
<p><img src="http://ximg.es/60/666666/ffffff&text=4" alt="" />Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis harum suscipit ducimus quisquam doloremque dolorum tenetur dolore libero optio quam delectus blanditiis dicta fuga impedit commodi adipisci aperiam?</p>
</div>
</div>

Ahora definimos las reglas de estilo básicas para mostrar el contenido, primero a 320px (mobile-first):

body {
    font-family: sans-serif;
    font-size: .9rem;
}
h1 {
    text-align: center;
}
/* 1 column: 320px */
.autowide {
    margin: 0 auto;
    width: 98%;
}
.autowide img {
    float: left;
margin: 0 .75rem 0 0;
}
.autowide .module {
    background-color: lightgrey;
    border-radius: .25rem;
    margin-bottom: 1rem;
}
.autowide .module p {
    padding: .25rem .75rem;
}

Si deseamos que a 600px el contenido se muestre a dos columnas hacemos uso del primer media-query donde definimos que todos los <div class="module"> tengan un ancho de 48.71%, floten a la izquierda con un margen derecho de 2.56% como separación entre ellos. Sin embargo, es necesario eliminar dicho margen derecho de cada <div class="module"> que ocupe la segunda columna para evitar que se desplace hacia abajo. Para lograrlo hacemos uso del selector .autowide .module:nth-child(2n+0) {margin-rigth:0;}

/* 2 columns: 600px */
@media only screen and (min-width: 600px) {
    .autowide .module {
        float: left;
        margin-right: 2.564102564102564%;
        width: 48.717948717948715%;
    }
    .autowide .module:nth-child(2n+0) {
        margin-right: 0;
    }
}

Si queremos que a 768px el contenido se muestre a tres columnas necesitamos otro media-query donde establecemos el nuevo ancho de los <div class="module"> en 31.62% y restauramos el margen derecho de 2.56% a los <div class="module"> que ocupaban la segunda columna. Ahora debemos eliminar el margen derecho de los <div class="module"> que ocupen la tercera columna para que no se desplacen hacia abajo.

/* 3 columns: 768px */
@media only screen and (min-width: 768px) {
    .autowide .module {
        width: 31.623931623931625%;
    }
    .autowide .module:nth-child(2n+0) {
        margin-right: 2.564102564102564%;
    }
    .autowide .module:nth-child(3n+0) {
        margin-right: 0;
    }
}

Finalmente, a partir de los 992px el contenido se mostrará a cuatro columnas mediante otro media-query donde definimos el ancho de cada <div class="module"> en 23.07%, restauramos el margen derecho a los <div class="module"> que ocupaban la tercera columna y eliminamos el margen derecho a los <div class="module"> que ocupen la cuarta columna para que no se desplacen hacia abajo.

/* 4 columns: 992px and up */
@media only screen and (min-width: 992px) {
    .autowide .module {
        width: 23.076923076923077%;
    }
    .autowide .module:nth-child(3n+0) {
        margin-right: 2.564102564102564%;
    }
    .autowide .module:nth-child(4n+0) {
        margin-right: 0;
    }
}

El resultado final está disponible en este enlace. Estás en libertad de usar y modificar los códigos mostrados aquí en el desarrollo de tus propios proyectos.

Hasta la próxima. ¡Abur!

César Vargas-Machuca

César Vargas-Machuca

Diseñador web (UI/UX). Creador de sitios web adaptables al entorno del usuario (responsive web design) y optimizados para los motores de búsqueda (posicionamiento SEO). Lector frecuente. Apasionado por la buena música. Aprendiz empedernido. Amigo de los animales. Excesivamente puntual. Detesto el spam. Soltero, ayer y hoy. Peruano, ¡siempre!