Share
Es muy posible utilizar el posicionamiento CSS en elementos de la cuadrícula, como lo haría con la mayoría de los otros elementos. Sin embargo, hay una o dos peculiaridades, así que echemos un vistazo rápido para evitar los inconvenientes.
Comencemos con una cuadrícula simple, con nueve elementos, distribuida en tres columnas. Cada columna tiene 1fr de ancho, excepto la tercera columna que (gracias a mínimo máximo()) no se reducirá más de 160px:
cuadrícula-plantillas-columnas: 1fr 1fr minmax (160px, 1fr);
Al agregar un par de reglas a uno de los elementos, podemos posicionarlo relativamente:
.item-2 posición: relativo; derecha: 100px; superior: 30px;
Así que como podemos esperar, declaramos que item-2 debe colocarse relativamente, luego defina algunas propiedades de compensación (aunque no intente usar la unidad fr en estas, no funcionará).
Notará que, si cambia el tamaño de la ventana, el elemento de la cuadrícula continúa comportándose (redimensionando) exactamente como era antes de que lo reposicionara, y sigue reservando, egoístamente, su lugar en la cuadrícula en caso de que tenga ganas de volver..
Entonces, ¿qué pasa cuando nosotros absolutamente posicionar ese articulo? En primer lugar, se posicionará contra su antepasado más cercano que tenga un valor de posición declarado. Si no te pones posición: relativa; (por ejemplo) en el contenedor de la cuadrícula, el elemento de la cuadrícula saldrá de los límites de la cuadrícula en busca de otra cosa para mantener, como el elemento html.
Verás en la demostración de arriba que el elemento ahora está posicionado absolutamente a 100px desde la izquierda y 30px desde la parte superior del contenedor de la cuadrícula. Se ha eliminado efectivamente del flujo de documentos, como es normal con los elementos posicionados absolutamente. Su ranura en la cuadrícula ha sido rellenada por item-3 y los otros elementos se han colocado para llenar los vacíos restantes..
Nota: si nuestro contenedor de rejilla tuviera un relleno, la posición sería en relación con esos límites externos del relleno.
También verá que ya no tiene las dimensiones que estaba usando cuando formaba parte de la cuadrícula. Se ha reducido al tamaño de su contenido. La cuadrícula no influye en el tamaño del elemento, y el elemento no influye en el tamaño de la cuadrícula de ninguna manera.
Es posible que tarde un poco en acostumbrarse, pero además de las compensaciones normales, también puede colocar un elemento de cuadrícula utilizando las propiedades de ubicación de cuadrícula. Por ejemplo, pongamos nuestra item-2 absolutamente en área de cuadrícula: 3/2; (en otras palabras, comenzando en la línea de la tercera fila hacia abajo, y la línea de la segunda columna a través).
Parece extraño, pero se puede ver que el elemento, que aún no se ve afectado por el tamaño de la cuadrícula y que aún se encuentra fuera del flujo, se ha colocado de manera rudimentaria encima de item-9. Es como si tuviera una grilla propia, sobre el original.
Nota: z-index le permitirá cambiar el orden de apilamiento de los elementos, si lo desea.
Continuando, si luego agregamos un desplazamiento en la mezcla (superior: 50px; por ejemplo) nuestro artículo aplicará ese desplazamiento, mientras permanece fiel a su propia ubicación de cuadrícula imaginaria:
En nuestro tutorial anterior hablamos sobre cómo se creará Grid implícito pistas si son necesarias; Pistas más allá de las que definimos explícitamente. Podemos colocar elementos en esas pistas de cuadrícula implícitas si existen, pero la cuadrícula no crear Esas pistas para elementos fuera del flujo..
En la siguiente demostración, hemos posicionado item-2 en área de cuadrícula: 2/4; pero esto solo es posible porque item-6, que todavía está en el flujo, ya ha pedido a Grid que cree esas pistas adicionales para nosotros.
¿Por qué necesitarías posicionarte con Grid? Inicialmente podría parecer una exageración. Pero cuando considera que los diseños de cuadrícula rotos y que se desplazan más allá de las sencillas páginas web "cruzadas y descendidas" a las que nos hemos acostumbrado, creo que el posicionamiento es muy útil.
Accentsconagua