Comprender la cuadrícula CSS: líneas de cuadrícula

En el primer artículo de esta serie, analicé cómo crear un contenedor de cuadrícula y las diversas propiedades aplicadas al elemento principal que forma su cuadrícula. Una vez que tiene una cuadrícula, tiene un conjunto de líneas de cuadrícula. En este artículo, aprenderá cómo colocar elementos contra esas líneas agregando propiedades a los elementos secundarios directos del contenedor de cuadrícula.

Cubriremos:

1. Las propiedades de ubicación grid-column-start , grid-column-end , grid-row-start , grid-row-end y sus abreviaturas grid-column y grid-row .
2. Cómo usar grid-area para ubicar por número de línea.
3. Cómo colocar elementos según el nombre de la línea.
4. La diferencia entre la cuadrícula implícita y explícita al colocar elementos.
5. Usando la palabra clave span , con un poco de subgrid adicional.
6. Qué tener en cuenta al mezclar elementos colocados y colocados automáticamente.

• Parte 1: Creación de un contenedor de cuadrícula
• Parte 2: Líneas de cuadrícula
• Parte 3: Áreas de plantilla de cuadrícula

Conceptos básicos del posicionamiento basado en líneas

Para colocar un elemento en la cuadrícula, establecemos la línea en la que comienza, luego la línea en la que queremos que termine. Por lo tanto, con una cuadrícula de cinco columnas y cinco filas, si quiero que mi elemento abarque las pistas de la segunda y la tercera columna, y las pistas de la primera, segunda y tercera fila, usaría el siguiente CSS. Recuerde que estamos apuntando a la línea, no a la pista en sí.

 .item { grid-column-start: 2; grid-column-end: 4; grid-row-start: 1; grid-row-end: 4; }

Esto también podría especificarse como una abreviatura, el valor antes de la barra diagonal es la línea de inicio, el valor después es la línea final.

 .item { grid-column: 2 / 4; grid-row: 1 / 4; }

En CodePen puede ver el ejemplo y cambiar las líneas que abarca el elemento.

Tenga en cuenta que la razón por la que el fondo de nuestro cuadro se extiende sobre toda el área es porque los valores iniciales de las propiedades de alineación align-self y justify-self se estiran.

Si solo necesita que su elemento abarque una pista, puede omitir la línea final, ya que el comportamiento predeterminado es que los elementos abarquen una pista. Vemos esto cuando colocamos elementos automáticamente como en el último artículo, cada elemento va a una celda, abarcando una columna y una pista de una fila. Entonces, para hacer que un elemento abarque de la línea 2 a la 3, podría escribir:

 .item { grid-column: 2 / 3; }

También sería perfectamente correcto perderse la línea final:

 .item { grid-column: 2; }

La taquigrafía grid-area

También puede colocar un elemento usando grid-area . Volveremos a encontrar esta propiedad en un artículo futuro, sin embargo, cuando se usa con números de línea, se puede usar para configurar las cuatro líneas.

 .item { grid-area: 1 / 2 / 4 / 4; }

El orden de esos números de línea es grid-row-start , grid-column-start , grid-row-end , grid-column-end . Si trabaja en un idioma horizontal, escrito de izquierda a derecha (como el inglés), eso es arriba, izquierda, abajo, derecha. Es posible que se haya dado cuenta de que esto es lo opuesto a cómo normalmente especificamos abreviaturas como margen en CSS: se ejecutan arriba, derecha, abajo, izquierda.

La razón de esto es que la cuadrícula funciona de la misma manera sin importar qué modo de escritura o dirección esté usando, y lo cubriremos en detalle a continuación. Por lo tanto, configurar ambos inicios y luego ambos extremos tiene más sentido que asignar los valores a las dimensiones físicas de la pantalla. No tiendo a usar esta propiedad para la ubicación basada en líneas, ya que creo que las abreviaturas de dos valores de grid-column y grid-row son más legibles al escanear a través de una hoja de estilo.

Líneas en la cuadrícula explícita

Mencioné la cuadrícula explícita versus la implícita en mi último artículo. La cuadrícula explícita es la cuadrícula que crea con las propiedades grid-template-columns y grid-template-rows . Al definir sus pistas de columna y fila, también define líneas entre esas pistas y en los bordes inicial y final de su cuadrícula.

Esas líneas están numeradas. La numeración comienza desde 1 en el borde de inicio tanto en el bloque como en la dirección en línea. Si está en un modo de escritura horizontal, con oraciones que comienzan a la izquierda y van hacia la derecha, esto significa que la línea 1 en la dirección del bloque está en la parte superior de la cuadrícula, y la línea 1 en la dirección en línea es la izquierda. línea.

Si está trabajando en un idioma RTL horizontal, como podría ser si trabaja en árabe, entonces la línea 1 en la dirección del bloque todavía está en la parte superior, pero la línea 1 en la dirección en línea está a la derecha.

Si está trabajando en un modo de escritura vertical, y en la imagen a continuación he configurado writing-mode: vertical-rl , entonces la línea 1 estará al comienzo de la dirección del bloque en ese modo de escritura, en este caso a la derecha. La línea 1 en la dirección en línea está en la parte superior.

Por lo tanto, las líneas de cuadrícula están vinculadas al modo de escritura y la dirección del script del documento o componente.

La línea final de su cuadrícula explícita es el número -1 y las líneas cuentan hacia atrás desde ese punto, lo que hace que la línea -2 sea la segunda desde la última línea. Esto significa que si desea abarcar un elemento en todas las pistas de la cuadrícula explícita, puede hacerlo con:

 .item { grid-column: 1 / -1; }

Líneas en la cuadrícula implícita

Si ha creado pistas de cuadrícula implícitas, también cuentan desde 1. En el siguiente ejemplo, he creado una cuadrícula explícita para columnas, sin embargo, las pistas de fila se han creado en la cuadrícula implícita, donde estoy usando grid-auto-rows para dimensionar estos a 5em.

El elemento con una clase de placed se ha colocado para abarcar desde la línea de fila 1 hasta la línea de fila -1. Si estuviéramos trabajando con una cuadrícula explícita para nuestras dos filas, entonces el elemento debería abarcar dos filas. Debido a que las pistas de fila se han creado en la cuadrícula implícita, la línea -1 se resolvió en la línea 2 y no en la línea 3.

Actualmente no hay forma de apuntar a la última línea de la cuadrícula implícita, sin saber cuántas líneas tiene.

Colocación de elementos contra líneas con nombre

En el último artículo expliqué que además de los números de línea, opcionalmente puede nombrar líneas en su cuadrícula. Usted nombra las líneas agregando un nombre o nombres dentro de corchetes entre los tamaños de sus pistas.

 .grid { display: grid; grid-template-columns: [full-start] 1fr [main-start] 2fr 2fr [main-end full-end]; }

Una vez que tenga algunas líneas con nombre, puede cambiar el número de línea por un nombre al colocar sus artículos.

 .item { grid-column: main-start / main-end; } 

Si su línea tiene varios nombres, puede elegir el que desee al colocar su artículo, todos los nombres se resolverán en la misma línea.

Nota : Hay algunas cosas interesantes que suceden cuando nombras líneas. Eche un vistazo a mi artículo "Nombrar cosas en el diseño de cuadrícula CSS" para obtener más información.

¿Qué sucede si hay varias líneas con el mismo nombre?

Obtiene un comportamiento interesante si tiene varias líneas que tienen el mismo nombre. Esta es una situación que podría ocurrir si nombra líneas dentro de la notación repeat() . En el siguiente ejemplo, tengo una cuadrícula de 8 columnas, creada al repetir 4 veces un patrón de 1fr 2fr . He nombrado la línea antes de la pista más pequeña sm y la pista más grande lg . Esto significa que tengo 4 líneas con cada nombre.

En esta situación, podemos usar el nombre como índice. Entonces, para colocar un elemento que comience en la segunda línea llamada sm y se extienda hasta la tercera línea llamada lg , uso grid-column: sm 2 / lg 3 . Si usa el nombre sin un número, siempre se resolverá en la primera línea con ese nombre.

Uso de la palabra clave span

Hay situaciones en las que sabe que desea que un elemento abarque un cierto número de pistas, sin embargo, no sabe exactamente dónde se ubicará en la cuadrícula. Un ejemplo sería donde está colocando elementos utilizando la colocación automática, pero quiere que abarquen varias pistas en lugar de la predeterminada 1. En este caso, puede usar la palabra clave span . En el siguiente ejemplo, mi elemento comienza en la línea auto , esta es la línea donde lo colocaría la ubicación automática, y luego se extiende por 3 pistas.

 .item { grid-column: auto / span 3; } 

Esta técnica será muy útil una vez que tengamos un amplio soporte del valor de subgrid para grid-template-columns y grid-template-rows . Por ejemplo, en un diseño de tarjeta en el que las tarjetas tienen un encabezado y un área de contenido principal en la que desea alinearlas entre sí, puede hacer que cada tarjeta abarque 2 filas, al mismo tiempo que permite el comportamiento habitual de colocación automática. Las tarjetas individuales utilizarán subgrid para sus filas (es decir, obtendrán dos filas cada una). Puede ver esto en el siguiente ejemplo si usa Firefox y lea mi artículo CSS Grid Level 2: Here Comes Subgrid para obtener más información sobre la subcuadrícula.

/

Elementos en capas con ubicación basada en líneas

Grid colocará elementos automáticamente en celdas vacías en la cuadrícula, no apilará elementos en la misma celda. Sin embargo, al usar la ubicación basada en líneas, puede colocar elementos en la misma celda de cuadrícula. En el siguiente ejemplo, tengo una imagen que abarca pistas de dos filas y una leyenda que se coloca en la segunda pista y tiene un fondo semitransparente.

Los elementos se apilarán en el orden en que aparecen en el origen del documento. Entonces, en el ejemplo anterior, el título viene después de la imagen y, por lo tanto, se muestra en la parte superior de la imagen. Si el título hubiera venido primero, terminaría mostrándose detrás de la imagen y no podríamos verlo. Puede controlar este apilamiento utilizando la propiedad z-index . Si era importante que el título fuera el primero en la fuente, entonces puede usar z-index , con un valor más alto para el título que para la imagen. Esto obligaría a que el pie de foto se muestre encima de la imagen para que se pueda leer.

Mezcla de ubicación basada en línea y automática

Debe tener un poco más de cuidado si está mezclando elementos colocados con elementos colocados automáticamente. Cuando los elementos se colocan completamente automáticamente en la cuadrícula, se colocarán secuencialmente en la cuadrícula y cada uno encontrará el siguiente espacio vacío disponible para ubicarse.

El comportamiento predeterminado siempre es avanzar hacia adelante y dejar un espacio si un elemento no cabe en la cuadrícula. Puedes controlar este comportamiento usando la propiedad grid-auto-flow con un valor de dense . En este caso, si hay un artículo que se ajusta a un espacio que ya quedó en la cuadrícula, se colocará fuera del orden de origen para llenar el espacio. En el siguiente ejemplo que usa empaquetamiento denso, el artículo 3 ahora se coloca antes del artículo 2.

Tenga en cuenta que este comportamiento puede causar problemas a los usuarios que se desplazan por el documento, ya que el diseño visual no estará sincronizado con el orden de origen que están siguiendo.

La colocación automática funciona de forma ligeramente diferente si ya ha colocado algunos elementos. Los elementos colocados se colocarán primero y la ubicación automática buscará el primer espacio disponible para comenzar a colocar elementos. Si ha dejado algunos espacios en blanco en la parte superior de su diseño a través de una fila de cuadrícula vacía, introduzca algunos elementos que se colocan automáticamente y terminarán en esa pista.

Para demostrarlo, en este último ejemplo, he colocado los elementos 1 y 2 con las propiedades de posicionamiento basadas en líneas, dejando la primera fila vacía. Los elementos posteriores se han movido hacia arriba para llenar los vacíos.

Vale la pena entender este comportamiento, ya que puede significar que los elementos terminen en lugares extraños si introduce algunos elementos nuevos en su diseño a los que no se les ha asignado una ubicación en la cuadrícula.

Terminando

Eso es prácticamente todo lo que necesita saber sobre las líneas de cuadrícula. Recuerde que siempre tiene líneas numeradas, sin importar de qué otra forma esté usando la cuadrícula, siempre puede colocar un elemento de un número de línea a otro. Los otros métodos que veremos en artículos futuros son formas alternativas de especificar su diseño, pero se basan en la cuadrícula creada por líneas numeradas.

• Parte 1: Creación de un contenedor de cuadrícula
• Parte 2: Líneas de cuadrícula
• Parte 3: Áreas de plantilla de cuadrícula