Las peculiaridades de CSS grid y el posicionamiento absoluto

Es bastante posible utilizar el posicionamiento CSS en los elementos de una cuadrícula, tal como lo harías con la mayoría de los otros elementos. Sin embargo, hay una o dos peculiaridades, así que echemos un vistazo rápido para asegurarnos de evitar los escollos.

Posicionamiento relativo simple

Empecemos con una cuadrícula simple, con nueve elementos, distribuidos en tres columnas. Cada columna tiene 1fr de ancho, excepto la tercera columna que (gracias a minmax()) se reducirá sin llegar a tener nunca menos de 160px:

1

grid-template-columns: 1fr 1fr minmax(160px, 1fr);

Al añadir un par de reglas a uno de los elementos, podemos posicionarlo relativamente:

1

.item-2 {

2

  position: relative;

3

  right: 100px;

4

  top: 30px;

5

}

Así como podríamos esperar, declaramos que item-2 debe tener un posicionamiento relativo, luego definimos algunas propiedades de desplazamiento (pero no intentes usar la unidad fr para esto, no funcionará).

Habrás notado que si cambias el tamaño de la ventana, el elemento de cuadrícula sigue comportándose como corresponde (redimensionándose) exactamente como lo hacía antes de posicionarlo, y continúa, egoístamente, reservando su lugar en la cuadrícula por si tiene ganas de volver a él.

Posicionamiento absoluto ligeramente más complejo

Entonces, ¿qué pasa si posicionamos de forma absoluta este elemento? En primer lugar, se posicionará respecto a su antecesor más próximo que tenga un valor de posición declarado. Si no declaras position: relative; (por ejemplo) en el contenedor de cuadrícula, el elemento de la cuadrícula saldrá fuera de los límites de la cuadrícula en busca de algo más que lo detenga, como el elemento html.

Habrás observado en la demostración anterior que el elemento ahora está posicionado de forma absoluta a 100px desde la izquierda y 30px desde la parte superior del contenedor de cuadrícula. Efectivamente se ha eliminado del flujo del documento, como es normal en los elementos posicionados de forma absoluta. El hueco que ocupaba en la cuadrícula ha sido rellenado por item-3 y los otros elementos se han reubicado para ocupar los restantes huecos.

Nota: si nuestro contenedor de cuadrícula tuviera relleno, el posicionamiento estaría en relación con esos límites del relleno exterior.

También habrás visto que ya no tiene las dimensiones que tenía cuando formaba parte de la cuadrícula. Se ha reducido adaptándose al tamaño de su contenido. Ni la cuadrícula influye en el tamaño del elemento y ni el elemento influye en el tamaño de la cuadrícula en forma alguna.

Posicionamiento absoluto dentro de la cuadrícula

Puede llevar un poco de tiempo acostumbrarse, pero además de los desplazamientos normales también puedes colocar un elemento de cuadrícula mediante las propiedades de posicionamiento de cuadrícula. Por ejemplo, vamos a posicionar nuestro item-2 de forma absoluta en grid-area: 3 / 2; (en otras palabras, comenzando en la tercera línea de fila hacia abajo y la segunda línea de columna en sentido transversal).

Parece extraño, pero puedes ver que el elemento, todavía no está afectado por el tamaño de la cuadrícula y continúa estando fuera del flujo, se ha posicionado abruptamente en la parte superior del elemento item-9. Es como si tuviese una cuadrícula propia, sobre la original.

Nota: si lo deseas, z-index te permitirá cambiar el orden de apilamiento de los elementos.

Continuando, si añadimos un desplazamiento a la mezcla (por ejemplo top: 50px;) nuestro elemento aplicará ese desplazamiento, sin dejar de ser fiel a su propia ubicación en su cuadrícula imaginaria:

Una nota sobre la cuadrícula implícita

En nuestro anterior tutorial hablamos sobre cómo Grid creará pistas implícitas en caso de ser necesario; más pistas de las que hayamos definido explícitamente. Podemos colocar elementos en esas pistas implícitas de la cuadrícula en caso de que existan, pero Grid no las creará esas pistas para los elementos que estén fuera del flujo.

En la siguiente demostración, hemos colocado el elemento item-2 en grid: 2 / 4; pero esto sólo es posible porque el elemento item-6, el cual todavía está en el flujo, ya ha pedido a la cuadrícula que cree esas pistas adicionales por nosotros.

Conclusión

¿Por qué ibas a necesitar el posicionamiento en la cuadrícula? En principio podría parecer exagerado. Pero si tienes en consideración los diseños de cuadrícula rotos y quieres ir más allá de las simples páginas web "horizontales y hacia abajo" a las que estamos acostumbrados, creo que encontrarás bastante útil el posicionamiento.

• 
  Diseño de cuadrícula CSS
  Crear un diseño de cuadrícula rota usando la cuadrícula CSS
  Ian Yates
• 
  Diseño de cuadrícula CSS
  Css Grid Layout: Una guía de inicio rápido
  Ian Yates