Nomenclatura de cuadrícula CSS

Cuando aprenda por primera vez cómo usar el diseño de cuadrícula, puede comenzar colocando elementos en la cuadrícula por números de línea. En este caso, es necesario controlar dónde van ciertas líneas en la cuadrícula y recordar que la secuencia de sus números se invierte si el sitio se muestra para los idiomas que se escriben de derecha a izquierda.

Basado en este sistema de líneas, las técnicas funcionan que hacen posible nombrar líneas e incluso áreas de cuadrícula. El uso de estas técnicas le permite colocar elementos por nombre y no por número. En este artículo, analizaré detalladamente las diversas formas de nombrar líneas y áreas en diseños de cuadrícula CSS , así como algunas características interesantes que crean.

---

Del traductor:
Un artículo hace dos años (2017), pero toca la mecánica importante de la funcionalidad CSS Grid y, por lo tanto, parece útil y relevante hoy en día.

Nomenclatura de línea

Comencemos nombrando las líneas de la cuadrícula. En el siguiente ejemplo, hay una cuadrícula con seis pistas de columna explícitas y una pista de línea explícita. Los elementos se colocan en la cuadrícula utilizando números de línea.

.grid { display: grid; grid-gap: 20px; grid-template-rows: 20vh ; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; } .header { grid-row: 1; grid-column: 1 / -1; } .sidebar { grid-row: 2; grid-column: 1 / 3; } .content { grid-row: 2; grid-column: 3 / -1; } 

Si es necesario, los nombres de línea se pueden especificar entre corchetes en la lista de pistas. Es importante recordar aquí que usted nombra la línea, no la pista que la sigue. Una vez nombradas las líneas, puede usar sus nombres en lugar de números al colocar elementos en la cuadrícula.

 .grid { display: grid; grid-gap: 20px; grid-template-rows: [header-start] 20vh [header-end] ; grid-template-columns: [sidebar-start] 1fr 2fr [sidebar-end] 1fr 2fr 1fr 2fr; } .header { grid-row: header-start; grid-column: 1 / -1; } .sidebar { grid-row: 2; grid-column: sidebar-start / sidebar-end; } 

El nombre puede ser cualquier cosa que no sea la palabra clave span . Por razones que aprenderá más adelante en este artículo, nombrar con el sufijo -start para las líneas de inicio (no importa si es una línea o una línea de columna) y -end para el final es una buena práctica. El resultado debe ser main-start y main-end o sidebar-start y sidebar-end .

Muy a menudo, la línea final de una parte de la cuadrícula y la línea de inicio de la otra parte coinciden, pero esto no es un problema, ya que las líneas pueden tener varios nombres. Puede especificar líneas de varios nombres agregándolas a través de un espacio entre corchetes.

 .grid { display: grid; grid-gap: 20px; grid-template-rows: [header-start] 20vh [header-end] ; grid-template-columns: [full-start sidebar-start] 1fr 2fr [sidebar-end main-start] 1fr 2fr 1fr 2fr [main-end full-end]; } .header { grid-row: header-start; grid-column: full-start / full-end; } .sidebar { grid-row: 2; grid-column: sidebar-start / sidebar-end; } .content { grid-row: 2; grid-column: main-start / main-end; } 

Este ejemplo demuestra que no tiene que nombrar cada línea de cuadrícula individual y que los números de línea que se pueden usar además de los nombres siempre están disponibles.

Codepen 1. Denominación de línea

Líneas con el mismo nombre.

Vimos cómo las líneas pueden tener varios nombres, pero también hay situaciones en las que varias líneas tienen el mismo nombre. Esto sucede si usa la función repeat() e incluye líneas con nombre en la lista de pistas. El siguiente ejemplo crea seis líneas con nombre, denominadas alternativamente col-a-start y col-b-start .

 .grid { display: grid; grid-gap: 20px; grid-template-columns: repeat(3, [col-a-start] 1fr [col-b-start] 2fr); } 

Si especifica col-a-start cuando coloca un elemento, se colocará en la primera línea encontrada con el nombre col-a-start (que en el ejemplo considerado sería la primera línea de la cuadrícula). Por el mismo principio, si especifica col-b-start al colocar un elemento, se colocará en la segunda línea de la cuadrícula.

Si necesita posicionarse en líneas posteriores, agregue un número después del nombre para indicar en qué línea de la línea con el mismo nombre debe colocarse el elemento

 .box3 { grid-row: 2; grid-column: col-a-start 2 / col-b-start 3; } 

Codepen 2. Líneas con el mismo nombre.

La especificación describe este comportamiento como "crear un conjunto de líneas de cuadrícula con nombre".

Guardar nombres de línea al reconstruir una cuadrícula adaptativa

Use los números de línea o sus nombres, usted decide. Como regla, las líneas pueden ser útiles en situaciones en las que desea cambiar la estructura de la cuadrícula como parte de una consulta de medios. En lugar de rastrear en qué línea coloca elementos en diferentes puntos de control, será posible operar con líneas nombradas secuencialmente.

En el siguiente ejemplo simple, defino columnas de cuadrícula para una pantalla estrecha, y luego las redefino con un ancho de 550px.

 .grid { display: grid; grid-gap: 20px; grid-template-rows: [header-start] 20vh [header-end]; grid-template-columns: [full-start ] 10px [sidebar-start main-start] 1fr [main-end sidebar-end] 10px [full-end]; } @media (min-width: 550px) { .grid { grid-template-columns: [full-start sidebar-start] 1fr 2fr [sidebar-end main-start] 1fr 2fr 1fr 2fr [main-end full-end]; } } 

Codepen 3. Nombrar cosas: redefinir la posición de las líneas nombradas

Regiones nombradas

Antes de eso, consideramos solo las líneas con nombre, pero hay otra forma. Podemos nombrar áreas de cuadrícula.

Una región de cuadrícula es una región rectangular que consta de una o más celdas de cuadrícula. El área está definida por cuatro líneas de cuadrícula que indican las líneas de inicio y finalización de columnas y filas.


Nombramos las áreas de la cuadrícula utilizando la propiedad grid-template-areas . Esta propiedad describe el diseño en forma de una tabla ASCII y es un conjunto de líneas, cada una de las cuales describe una línea separada de la cuadrícula.

 .grid { display: grid; grid-template-columns: repeat(3, 1fr 2fr) ; grid-template-areas: "head head head head head head" "side side main main main main" "foot foot foot foot foot foot"; } 

Los nombres que usamos en las filas de la propiedad grid-template-areas se asignan a los hijos directos de la cuadrícula usando la propiedad grid-area . El valor de esta propiedad, cuando se usa para nombrar, es el llamado identificador de usuario , por lo que no necesita estar entre comillas

 .header { grid-area: head; } .sidebar { grid-area: side; } .content { grid-area: main; } .footer { grid-area: foot; } 

Para hacer que el área cubra más de una celda al describir la estructura de la cuadrícula usando la propiedad grid-template-areas , debe volver a registrar su identificador varias veces a lo largo de una fila o columna. El área creada debe ser un rectángulo, las áreas en forma de L y T no están permitidas. También puede crear solo un área rectangular para cada nombre: no se permiten áreas desconectadas. La especificación señala que:

"Se pueden permitir áreas no rectangulares o desconectadas en futuras versiones de este módulo"
- Propiedad grid-template-areas

Al describir una cuadrícula, debe cuidar su presentación completa, de lo contrario, el anuncio completo se descartará como no válido. Esto significa que cada celda de la cuadrícula se debe llenar.

 grid-template-areas: "head head head head head head" "side side main main main main" "foot foot foot foot foot foot"; } 

Como es posible que desee dejar algunas celdas en el marcado vacías, la especificación define un símbolo de punto . o una secuencia de puntos sin espacios entre ellos .... como un marcador de una celda vacía

 grid-template-areas: "head head head head head head" "side side main main main main" "....... ....... foot foot foot foot"; } 

Codepen 4. Regiones nombradas

Si aún no ha descargado Firefox para aprovechar todas las funciones más recientes de Firefox DevTools Grid Inspector, le recomiendo hacerlo cuando trabaje con áreas con nombre.


Demostración de áreas con nombre en el "Inspector de cuadrícula" del navegador Firefox ( Abrir original )

Las líneas nombradas forman áreas

Ahora llegamos a la parte interesante de toda esta fiesta de nombres. Es posible que recuerde que cuando miramos las líneas con nombre, sugerí usar un acuerdo de final de línea que establezca el inicio del área usando -start , y el final del área usando -end . La razón de esto es que si nombra las líneas de esta manera, termina con un área de cuadrícula con ese nombre, y puede poner un elemento en él estableciendo este nombre a través de la propiedad de grid-area .

En el siguiente ejemplo, tanto para las filas como para las columnas, nombro las líneas panel-start y panel-end . Esto me dará un área con nombre llamada panel. Si lo configuro como el valor de la propiedad de grid-area para un elemento en la página, esto colocará el elemento en el área definida por estas líneas

 .grid { display: grid; grid-gap: 20px; grid-template-columns: 1fr [panel-start] 2fr 1fr 2fr 1fr [panel-end] 2fr; grid-template-rows: 10vh [panel-start] minmax(200px, auto) 10vh [panel-end]; grid-template-areas: "head head head head head head" "side side main main main main" ".... .... foot foot foot foot"; } .panel { grid-area: panel; } 

Codepen 5. Áreas formadas a partir de líneas con nombre

Las líneas se forman a partir de áreas nombradas.

También podemos hacer lo contrario de lo que se muestra arriba, usando líneas creadas a partir de áreas con nombre. Cada área crea cuatro líneas con nombre utilizando la misma convención de sufijo que -start y -start . Si hay un área con nombre llamada main , su línea de inicio y final y las líneas de columna se denominarán main-start y main-end . Estas líneas con nombre se pueden usar para colocar un elemento.

En el siguiente ejemplo, ubico el panel usando los nombres de estas líneas generadas automáticamente:

 .grid { display: grid; grid-template-areas: "head head head head head head" "side side main main main main" ".... .... foot foot foot foot"; } .panel { grid-column: main-start / main-end; grid-row: head-start / foot-end; } 

Codepen 6. Las líneas se forman a partir de áreas nombradas

Nombres de línea equivalentes al nombre de la región

Además de las líneas con los -end -start y -start , se crean líneas para las caras de cualquier región de cuadrícula con el nombre de esta región. Por lo tanto, si hay un área main , puede usar el identificador main como un valor para las propiedades grid-row-start o grid-column-start , y el contenido se ubicará desde el principio de esta área. Si usó este valor para la propiedad grid-row-end o grid-column-end , entonces se selecciona la línea final de esta área. En el ejemplo a continuación, estiro el elemento .panel desde el inicio de main al final de main para columnas, y desde el inicio de main a end of foot para líneas

 .panel { grid-column: main; grid-row: main / foot ; } 

Codepen 7. Nombres de línea equivalentes al nombre de la región

Explicación de propiedad de área de cuadrícula

Es útil saber algo sobre la propiedad del grid-area la grid-area . Esencialmente, lo que hacemos cuando usamos grid-area con un identificador como main es cómo describimos las cuatro líneas del área. Los valores válidos para la propiedad de grid-area también son números de línea.

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

Esto tiene el mismo efecto que la entrada:

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

Cuando preguntas

 .main { grid-area: main; } 

Esto realmente significa:

 .main { grid-area: main / main / main / main ; } 

La propiedad de grid-area comporta de manera un poco diferente cuando se utiliza un identificador de usuario, en lugar de un número de línea. Al usar números de línea para valores iniciales en la propiedad de grid-area , cualquier número de línea final que no especifique se establecerá automáticamente en auto , por lo tanto, se utilizará el posicionamiento automático para determinar dónde colocar el elemento.

Sin embargo, si usa una ID de usuario y omite algunas líneas, se configuran de la siguiente manera

Tres nombres de línea especificados

 .main { grid-area: main / main / main ; } 

Si especifica tres nombres de línea, esencialmente le falta el grid-column-end . Si grid-column-start es un identificador de usuario, entonces el mismo identificador también se establece para grid-column-end . Como hemos visto, la propiedad -end usará la cara final del main , por lo que si grid-column-start y grid-column-end el mismo nombre, el contenido se extiende a todas las columnas de esta área.

Dos nombres de línea especificados

 .main { grid-area: main / main ; } 

Cuando solo se especifican dos nombres, se establecen las líneas de inicio de las filas y columnas. Si grid-column-start y / o grid-row-start es un identificador de usuario, entonces grid-column-end y grid-row-end se establecen en el mismo valor, respectivamente.

Nombre de una línea especificada

 .main { grid-area: main ; } 

Establecer un solo nombre de línea es exactamente lo que haces cuando configuras el área de la cuadrícula con el nombre principal del área. En este caso, las cuatro líneas se establecen en este valor.

Nota : Esto funciona tanto para grid-column grid-row .

Este método en realidad significa que puede designar un conjunto de columnas o filas en una cuadrícula para colocar un elemento. Al igual que los valores -end para la propiedad de grid-area se establecen en los mismos valores que los iniciales (cuando se omiten), los valores finales para las propiedades de grid-column grid-row también se comportan. Esto significa que puede colocar el elemento entre las líneas de columna inicial y final del área main utilizando:

 .main { grid-column: main ; } 

En la explicación de Breaking Out with CSS Grid, mostré cómo se usa esta característica para crear patrones de diseño útiles para áreas de tamaño completo que van más allá de un área de contenido limitada.

Una cuadrícula puede tener muchas líneas con nombre.

Todo lo anterior significa que la cuadrícula como resultado puede contener una gran cantidad de líneas con nombre. En la mayoría de los casos, no debe preocuparse por esto. Trabaja con las líneas que necesitas e ignora la existencia de otros.

Nombramiento y propiedades abreviadas de cuadrícula y plantilla de cuadrícula

CSS Grid tiene dos abreviaturas que le permiten establecer muchas propiedades de cuadrícula en una sintaxis compacta. Personalmente, me parece bastante difícil de percibir. Cuando hablo de esto con otros desarrolladores, las opiniones están divididas: algunos como ellos, otros prefieren usar propiedades separadas. Como en el caso de otras abreviaturas, debe recordarse que los valores de las propiedades que no use se restablecerán al original

Abreviatura de plantilla de cuadrícula: crear una cuadrícula explícita

Puede usar el acceso directo de grid-template para establecer todas las propiedades de una cuadrícula explícita en un lugar a la vez

 grid-template-columns grid-template-rows grid-template-areas 

Esto significa que puede definir líneas con nombre y áreas con nombre al mismo tiempo. Cuando use una propiedad que combine áreas y líneas con nombre, primero determinaría el valor de la propiedad grid-template-areas , como se describe en la sección anterior.

Entonces es posible que desee agregar nombres de línea. Se colocan al principio y al final de cada línea de valores; recuerde que cada línea de valores representa una pista de línea. El nombre o los nombres de las cadenas deben estar dentro de los corchetes, al igual que cuando se nombran las líneas en la propiedad grid-template-rows , y deben estar fuera de las comillas que rodean la cadena de valores que define la pista de línea.

En el ejemplo a continuación, mencioné dos líneas de línea: panel-start viene después de la línea del encabezado (segunda línea de la cuadrícula) y panel-end va después de la última línea del pie de página (cuarta línea de la cuadrícula con tres pistas de línea). También determiné el tamaño del seguimiento de línea para las líneas con nombre y sin nombre agregando un parámetro al final de la línea de valor que describe este seguimiento de línea

 .grid { display: grid; grid-gap: 20px; grid-template: " head head head head head head" 10vh [panel-start] "side side main main main main" minmax(200px, auto) ".... .... foot foot foot foot" 10vh [panel-end]; } 

Si también es necesario nombrar las columnas, no podemos hacer esto dentro de la línea, por lo que debemos agregar el separador / y luego definir una lista de pistas de columna. Las líneas se nombran como si esta lista fuera el valor de la propiedad grid-template-columns .

 .grid { display: grid; grid-gap: 20px; grid-template: " head head head head head head" 10vh [panel-start] "side side main main main main" minmax(200px, auto) ".... .... foot foot foot foot" 10vh [panel-end] / [full-start ] 1fr [panel-start] 2fr 1fr 2fr 1fr [panel-end] 2fr [full-end]; } 

En este ejemplo, que puede ver en el código de abajo, creo un conjunto adicional de líneas para filas y columnas, estas líneas definen un área llamada panel , ya que utilicé la sintaxis panel-start y panel-end . De esta manera, puedo colocar el elemento estableciendo el valor del panel de la propiedad de grid-area .

A primera vista, esto parece bastante incomprensible. Entonces, aquí creamos una lista de columnas que se alinean de acuerdo con nuestra tabla ASCII definida anteriormente. Opcionalmente, agregue espacios entre valores para alinear la definición de template-areas template-columns .

Codepen 8. Abreviatura de cuadrícula- plantilla

Abreviatura de cuadrícula: malla implícita y explícita

La especificación supone que si necesita definir una cuadrícula implícita por separado, debe usar la propiedad de grid abreviada en lugar de grid-template de grid-template . La grid abreviaturas restablece todos los valores implícitos que no ha establecido. Por lo tanto, le permite establecer y restablecer las siguientes propiedades

 grid-template-columns grid-template-rows grid-template-areas grid-auto-columns grid-auto-rows grid-auto-flow 

Para nuestros propósitos, usar la abreviatura de grid será idéntico a usar la grid-template , ya que definimos una definición de cuadrícula implícita. La única diferencia estará en restablecer las propiedades grid-auto–* . La abreviatura de la grid se puede usar para establecer la cuadrícula explícita y restablecer las propiedades implícitas, o para establecer la cuadrícula implícita y restablecer las propiedades explícitas. Hacer ambas cosas al mismo tiempo no tiene mucho sentido

 .grid { display: grid; grid-gap: 20px; grid: " head head head head head head" 10vh [panel-start] "side side main main main main" minmax(200px, auto) ".... .... foot foot foot foot" 10vh [panel-end] / [full-start ] 1fr [panel-start] 2fr 1fr 2fr 1fr [panel-end] 2fr [full-end]; } 

Nota : En la versión original recomendada de la especificación CSS Grid, esta reducción también restablece las propiedades de espacio entre las celdas grid-column-gap y grid-row-gap . Sin embargo, este comportamiento finalmente cambió. Los navegadores actualizan este comportamiento, pero al momento de escribir (octubre de 2017), aún podría encontrarse con una situación en la que el valor de las propiedades de gap se restablece a cero cuando se utiliza la reducción, por lo que es posible que deba redefinirlas más tarde

¿Qué enfoque usar?

¿Puede preguntar cuál de todos estos métodos se utiliza mejor para una tarea específica? No hay reglas estrictas. Personalmente, me gusta usar grid-template-areas de grid-template-areas para componentes cuando trabajo en mi biblioteca de plantillas. Es conveniente tener la estructura del componente justo en frente de sus ojos directamente en CSS y grid-template-areas lo que facilita probar diferentes opciones de diseño al probarlo. Descubrí que debido a un movimiento tan simple de las celdas de malla, es importante asegurarse de que no se altere el orden visual y lógico de las celdas componentes. Los visitantes que interactúen con su sitio usando el teclado, cambiando entre los elementos con el botón Tab, seleccionarán los elementos en el orden en que se definen en el marcado. Asegúrese de recordar reordenar el diseño tan pronto como decida la forma más adecuada de mostrar su contenido. Para obtener más información sobre este problema, sugiero leer el artículo Diseño de cuadrícula CSS y Accesibilidad .

Convenciones básicas de nomenclatura

Para resumir el artículo, recapitularé algunas reglas básicas a tener en cuenta al nombrar líneas o áreas de CSS Grid:

Nombre de línea:

1. Puede usar casi cualquier nombre (excepto la palabra clave span), pero también puede usar el área creada a partir de estas líneas si sus nombres terminan con -start y -start
2. Las líneas pueden tener múltiples nombres definidos entre corchetes y separados por un espacio
3. Varias líneas pueden tener el mismo nombre; Si necesita una específica, simplemente agregue el número de la línea necesaria después del nombre en orden

Áreas de nomenclatura:

1. Al definir un área usando grid-template-areas , la forma del área debe ser rectangular
2. Cuando se usa la propiedad grid-template-areas , cada pista de línea de la cuadrícula se representa como una cadena de valores y se muestra entre comillas.
3. Cada celda debe estar llena. Si por diseño desea dejar algunas celdas vacías, use un punto para esto . o puntos suspensivos ... sin espacios
4. Las regiones con nombre crean líneas con el mismo nombre que la región, pero con los -end -start y -start . Se pueden usar para posicionar elementos.