Colocación, expansión y densidad en CSS Grid

Introducción

Lo más común que se aprende en CSS Grid suele estar relacionado con el contenedor de la cuadrícula y no con los elementos de la cuadrícula. Una definición de cuadrícula genérica aplicada al contenedor de la cuadrícula es suficiente para una estructura de diseño básica. Sin embargo, cuando se necesita más control sobre el contenido de la cuadrícula, el contenedor de la cuadrícula tiene usos limitados.

Por ejemplo, es posible que desee una cuadrícula de 4 x 2, pero el primer elemento de la cuadrícula debe ocupar las columnas 1 y 2, así como las filas 1 y 2. O tal vez desee que un elemento se extienda hasta la última pista de la columna de la cuadrícula cuando no tiene idea de cuál es el número total de tiempo de ejecución de la pista de la columna de la cuadrícula.

El tamaño de cada elemento de la cuadrícula está predefinido y es necesario encontrar una forma de dimensionarlos en relación con otros elementos en el contenedor de la cuadrícula.

En este tutorial explorará la ubicación, la extensión y la densidad en CSS Grid.

Colocación de elementos de la cuadrícula: comience aquí, termine allí

Todo en el navegador tiene un estilo predeterminado, por ejemplo, 0o auto. También puede haber otros valores predeterminados que debes conocer antes de ajustar los valores personalizados. Cuando tienes una cuadrícula, los elementos de la cuadrícula tienen valores de ubicación definidos por grid-[x]-starty grid-[x]-end(donde xpuede ser columno row). El valor es automático.

Cuando vea un diseño de cuadrícula, puede ser útil recordar que cada elemento de esa cuadrícula tiene un valor de ubicación sin importar cuán simétrico se vea el flujo:

    .container {      display: grid;      grid-gap: 10px;      grid-template-columns: repeat(5, 1fr)    }    .item {      grid-column-start: auto; /_ default _/      grid-column-end: auto; /_ default _/      grid-row-start: auto; /_ default _/      grid-row-end: auto; /_ default _/    }

Colocación de columnas

Ajustemos estos valores predeterminados comenzando con las columnas:

    .item:nth-child(1) {      grid-column-start: 1;      grid-column-end: 5;    }

• Queremos el primer elemento de la cuadrícula..item:nth-child(1)
• Para empezar en la línea uno,grid-column-start: 1;
• Y termina en la línea 5,grid-column-end: 5;

Vea el código completo aquí.

Colocación de filas

Las mismas reglas se aplican a la colocación de filas:

    .item:nth-child(22) {      grid-row-start: 1;      grid-row-end: 4;    }

Sin embargo, grid-row-[x]se restablecerá la ubicación predeterminada del elemento de la cuadrícula para comenzar en la línea de columna 1 y la línea de fila 1, luego se producirá la expansión de la ubicación.

Verás en este código que esa línea 22dejó su lugar y se movió hacia arriba a la línea 1anterior a la expansión.

Si desea que permanezca en su trayectoria de columna original, entonces debe indicar explícitamente que:

    .item:nth-child(20) {      grid-column-start: 3;      grid-row-start: 5;      grid-row-end: 10;    }

Puede proporcionar solo starto end—no es necesario que proporcione las propiedades de ubicación en pares. Puede proporcionar solo una y el resto permanecerá como auto(predeterminado). Lo complicado a tener en cuenta es que si cambia solo el valor de grid-[x]-start, el elemento de la cuadrícula comenzará en la línea , no en la pista:

    .item:nth-child(1) {      grid-column-start: 5;    }

Por otro lado, si especificas endsolo, comenzará desde el valor final especificado y abarcará la cuadrícula en sentido inverso. Por ejemplo, si le dices a item 10que finalice en 3, comenzará desde la línea siguiente más cercana 2y dibujará hasta la línea 3:

    .item:nth-child(10) {      grid-column-end: 3;    }

Puedes ver todo el código aquí.

También existe una sintaxis abreviada para grid-[x]-startand grid-[x]-endque permite prescindir del código -startand -end:

    .item {      grid-column: [start] / [end];      grid-row: [start] / [end];    }

A continuación se muestran algunos ejemplos que pueden reemplazar los ejemplos de código que hemos escrito hasta ahora:

    .item {      grid-column: 1 / 5; /__ Line 1 to 5 /      grid-row: 1 / 4; /*_ Line 1 to 4 __/      grid-column: 5 / auto; / Line 5 to 6 *_/      grid-column: auto / 3; /_ Line 2 to 3 _/    }

Abarcando: Comienza/Termina aquí, toma n

Hemos estado usando la palabra "span" para describir la cantidad de pistas que debe ocupar una ubicación. Cuando decimos línea 1a 5, estamos diciendo que el elemento de la cuadrícula debe abarcar desde 1hasta 5. Por lo general, me refiero a esto como expansión implícita.

Hay una spanpalabra clave que funciona como valor. Cuando se utiliza, se puede hacer referencia a ella como expansión explícita. La colocación y la expansión son lo suficientemente flexibles como para que pueda utilizar tanto la expansión implícita como la explícita como valor para una sola propiedad.

Columnas de expansión

Comencemos viendo cómo podemos distribuir un elemento a lo largo de una pista de columna:

    .item:nth-child(1) {      grid-column: span 5;    }

Esta es una alternativa al primer ejemplo que escribimos:

    .item:nth-child(1) {      grid-column: 1 / 5;    }

Pero podemos incluir detalles adicionales:

    .item:nth-child(1) {      grid-column: span 2 / 5;    }

Aquí terminamos 5y el tramo 2continúa hacia atrás.

Otro ejemplo:

    .item:nth-child(1) {      grid-column: 2 / span 2;    }

Aquí comenzamos en la línea de columna 2y terminamos en la línea de columna 4(después de 2los saltos).

Filas de expansión

Todo lo que has aprendido hasta ahora en este tutorial sobre filas se aplica sin excepción:

    .item:nth-child(1) {      grid-column: 2 / span 2;      /_ highlight line_/      grid-row: span 5    }

Seguimos expandiendo la primera vez, pero luego expandimos sobre el eje de filas. El navegador dibujará el cuadro hacia abajo para ocupar cinco pistas.

Colocación y expansión de exceso

Recordemos que hemos definido explícitamente nuestra cuadrícula para que tenga 5columnas. Podemos extender o colocar un elemento de una columna 6a otra como se muestra a continuación:

    .item:nth-child(1) {      grid-column: span 10; /_ 1 _/      grid-column: 1 / 10; /_ 2 _/      grid-column: 7 / 10; /_ 3 _/      grid-column: 1 / span 10; /_ 4 _/    }

Se crearán pistas implícitas para acomodarlos.

Números enteros negativos como valores

Los números enteros negativos son tan útiles como los positivos: invierten la ubicación o la extensión. Por lo tanto, en lugar de comenzar desde la primera columna o fila, la ubicación o la extensión comenzarán desde la última columna o fila.

Estos fragmentos de código son opuestos directos:

    .item:nth-child(1) {      grid-column: 1 / 5    }

    .item:nth-child(1) {      grid-column: -1 / -5    }

Como comenzamos desde el final para dibujar hacia atrás, como mencioné anteriormente, habrá espacio para un elemento 2en la columna 1, por lo que se empujará hacia abajo. Analizaremos cómo usar la densidad para llenar estos espacios creados en tales casos (si el contenido no es simétrico).

Existe una forma de extender hasta el final de una columna o fila sin necesidad de saber cuántas columnas define el contenedor de la cuadrícula. Esto resulta útil cuando se utiliza el relleno automático o el ajuste automático para definir una cuadrícula dinámica:

    .item:nth-child(1) {      grid-column: 1 / -1    }

Si especifica -1el final de la fila o el final de la columna, el elemento de la cuadrícula se extenderá hasta el final de la cuadrícula comenzando en el inicio que haya proporcionado (en este caso, la línea 1).

Sin embargo, esto no funciona en cuadrículas implícitas. Por lo tanto, dado que definimos solo columnas y filas en el contenedor de cuadrícula, esto no hará nada:

    .item:nth-child(1) {      grid-row: 1 / -1;    }

Para que funcione, deberá proporcionar una definición de fila explícita al contenedor de la cuadrícula. Por ejemplo:

    .container {      grid-template-rows: repeat(10, 30px);    }

Densidad

En los ejemplos anteriores, habrás visto alguna ubicación o expansión que provocó espacios vacíos dispersos en el medio de una cuadrícula.

Puede cerrar estos espacios utilizando grid-auto-flowla propiedad en el contenedor de la cuadrícula para cerrar esos espacios en blanco:

    .container {      grid-auto-flow: dense;    }

Una cosa que debes tener en cuenta es que si tienes contenido simétrico que necesita seguir un orden, hacer que el flujo sea denso distorsionará ese orden. Este es un equilibrio que debes alcanzar si quieres un diseño compacto y, al mismo tiempo, colocar los elementos de la cuadrícula de manera irregular.

Observe cómo después de colocar el elemento 1al final, la cuadrícula vuelve a continuar colocándose 2al principio de las pistas.

Conclusión

En este tutorial, exploramos CSS Grid: ubicación, extensión y densidad.