Líneas y áreas de grid con nombre

Puede asignar nombres a las líneas de la cuadrícula entre corchetes dentro de grid-template-columns y grid-template-rows. Las líneas con nombre hacen que el código de posicionamiento sea más legible que los números sin más.

Utilice líneas con nombre en grid-column y grid-row para que el posicionamiento sea legible:

Al definir áreas con nombre mediante grid-template-areas, CSS crea automáticamente líneas con nombre con los sufijos -start y -end, a las que puede hacer referencia.

Al utilizar repeat(), puede incluir nombres dentro del patrón repetido. Las líneas reciben sufijos numéricos para evitar ambigüedades.

Utilice líneas con nombre junto con span para abarcar un número específico de pistas con nombre:

Las áreas con nombre (mediante grid-template-areas) son el enfoque más legible para posicionar elementos:

Las líneas con nombre resultan especialmente útiles en diseños editoriales complejos con varios elementos que abarcan varias pistas:

Las líneas con nombre y los números de línea se pueden mezclar libremente en la misma cuadrícula:

Una sola línea puede tener varios nombres, lo que resulta útil cuando sirve a la vez como final de un área y comienzo de otra:

Si define un área con nombre llamada "main", las líneas main-start (de columna y de fila) y main-end se crean automáticamente, lo que permite utilizarlas para elementos superpuestos.

Las DevTools de Chrome y Firefox pueden mostrar las líneas de cuadrícula con nombre como etiquetas en la superposición. Active las etiquetas de línea en el panel Layout para comprobar que los nombres sean correctos.

Asigne nombres a las líneas de la cuadrícula entre corchetes dentro de las definiciones de pistas para facilitar el posicionamiento. Las áreas con nombre generan automáticamente nombres de línea con los sufijos -start y -end. Una línea puede tener varios nombres. Las líneas con nombre se combinan libremente con span y con números. Utilice las DevTools para visualizar las líneas con nombre como superposiciones.