Control con Css de elementos huérfanos en grillas con la última línea incompleta 12.11.13
Combinación de pseudoclases estructurales para controlar el último elemento en rejillas con la última línea incompleta.
Control con Css de elementos huérfanos en grillas con la última línea incompleta
Caso: una estructura de n elementos distribuidos en x elementos por fila. La cantidad del número total de ellos a priori desconocida o variable. Siempre que el número total de elementos mostrados no sea un múltiplo entero del número de ellos por fila nos encontraremos con huecos vacíos al final de la grilla.
En la mayoría de los casos quizás o suponga problema. Pero quizás lo veas como algo antiestético.
Así que la cuestión es si sería posible utilizando sólo css controlar ese elemento final para que no quede el vacío en la última línea. Y de ser posible, que lo es y de ahí este artículo, cómo hacerlo de la forma más sencilla y automatizada posible.
Automatizada en el sentido de que sea funcional con independencia del número total de ítems y sencilla en que pueda ser adaptada para cualquier número de ellos por fila.
Pseudoclases estructurales al rescate
Sigamos con nuestra estructura de ejemplo de 3 elementos por línea (3n) y cada uno de ellos de una anchura de 1/3 de su padre menos el margen derecho correspondiente en los 2 primeros. Quizás el primer pensamiento sea usar el selector de pseudoclase :last-child para indicarle que su anchura sea el 100% de su padre. Pero esto daría lugar a las siguientes tres casos posibles:
Declaración que como ves en la imagen superior sólo es efectiva en caso de que haya 1 elemento huérfano (3n+1). En el caso de que sean un número múltiplo entero de 3 (3n) o de 3 más 2 elementos (3n+2) el efecto final es aún peor.
Multiples pseudoclases al mismo elemento
A diferencia de lo que ocurre con los pseudoelementos con las pseudoclases sí se puede construir un selector de la forma selector:pseudoclase1:pseudoclase2
Así que en nuestra rejilla de 3 elementos por línea necesitamos añadir una segunda condición al selector anterior :last-child. Esta condición es que el ítem no sea múltiplo de 3 (3n). En esta estructura, como viste, hay dos casos en que necesitamos modificar los estilos: a los ítems 3n+1 y 3n+2
Por lo tanto, los selectores con dos pseudoclases por elemento que necesitamos son 2. Y la segunda pseudoclase que limitará el alcance de la primera (último elemento) es éste no sea un 3n o lo que es lo mismo, que sea 3n+1 ó 3n+2
X:nth-child(3n+1):last-child {
width: 100%;
margin-right: 0;
}
X:nth-child(3n+2):last-child {
width: 65%;
margin-right: 0;
}
X es el elemento html que sea cada ítem
El primer selector puedes leerlo como todos los elementos 'X' que siendo el último hijo sea a la vez un 3n+1. El efecto del segundo selector es el de la imagen siguiente:
Todo lo anterior puedes verlo funcionando en la demo siguiente:
Ver demo a full . Descargar códigos (8Kb)
En este ejercicio he optado por un disposición de tres en línea. En otras disposiciones, como de cuatro ítems por línea, sólo es cuestión de añadir los selectores oportunos:
X:nth-child(4n+1):last-child { }
X:nth-child(4n+2):last-child { }
X:nth-child(4n+3):last-child { }
Y como la pseudoclase 'last-child' también permite operadores como 'nth-child(Xn)' puedes ir un poco más allá con un poco de imaginación para crear atender no sólo al último, sino al penúltimo:
X:nth-child(4n+1):last-child(2) { }
X:nth-child(4n+1):last-child(2) + X:nth-child(4n+2):last-child { }
Créditos y autoría original
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
Excelente tuto mil gracias =)
ResponderEliminar