Áreas de CSS Grid

Introducción

• CSS Grid cuenta con soporte en todos los navegadores principales desde 2017
• Sin embargo, incluso en 2024 muchas personas todavía no usan la función grid-template-areas
• Este artículo busca explicar la simplicidad y potencia de grid-template-areas

Áreas de cuadrícula con nombre en CSS

• En CSS Grid, cada área de la cuadrícula puede recibir un nombre y referenciarse en todo el CSS
• Por ejemplo, se puede definir un diseño de cuadrícula con dos columnas y mapear cada elemento con grid-area

Reglas de las áreas de plantilla de cuadrícula

• Las áreas definidas deben tener forma rectangular
• Todas las áreas deben estar definidas

Sintaxis de plantilla de cuadrícula

• Se debe usar la propiedad grid-template-areas para definir las áreas de la cuadrícula
• Se pueden usar varias cadenas de áreas
• Una sola cadena implica un diseño unidimensional y varias cadenas implican un diseño multidimensional

Líneas de cuadrícula con nombre en CSS

• Las líneas de la cuadrícula pueden recibir nombres únicos
• Por ejemplo, en una cuadrícula con 3 columnas se puede asignar un nombre a cada línea
• Las líneas de cuadrícula con nombre no reemplazan la numeración de líneas predeterminada

Casos de uso de grid-template-areas

• Inversión de la dirección de la cuadrícula: se puede cambiar fácilmente la dirección del diseño usando grid-template-areas
• Diseño de encabezado: se puede definir el diseño del encabezado y hacerlo responsivo usando grid-template-areas
• Diseño editorial: se pueden definir y modificar fácilmente diseños que incluyen varios tipos de contenido

Diseños condicionales y CSS :has()

• Se puede cambiar el diseño según la presencia de elementos usando el selector CSS :has()

Soporte multilingüe (LTR/RTL)

• CSS Grid ajusta el diseño según la dirección de la página (LTR o RTL)
• Esto significa que las áreas de cuadrícula con nombre también siguen la dirección de la página

Áreas de cuadrícula y DevTools

• Todos los navegadores principales ofrecen buenas herramientas para las áreas de cuadrícula (Chrome, Safari, Firefox)
• Cada navegador tiene una forma distinta de visualizar las áreas de cuadrícula

Resumen de GN⁺

• La función grid-template-areas de CSS Grid es útil para entender y gestionar visualmente los diseños
• Es especialmente útil cuando los miembros del equipo necesitan cambiar el diseño
• Este artículo explica la simplicidad y potencia de grid-template-areas, con la intención de impulsar a más personas a usar esta función
• Otro proyecto con funcionalidades similares es Flexbox

[GN⁺]

Comentarios de Hacker News

• La demo de animación le pareció interesante, pero no estaba implementada con CSS

  • Aprendió Flexbox y quedó satisfecho, así que no sintió la necesidad de aprender Grid
  • Hay razones para preferir Grid, pero en la práctica no sintió que lo necesitara
  • Para tablas de datos usa tablas reales

• Este artículo destaca las ventajas de Grid y lo engorrosa que puede ser la sintaxis de CSS

  • Hay dos dimensiones y tres parámetros (inicio, fin, tamaño)
  • Hay al menos tres formas de declarar cada parámetro
  • Las propiedades abreviadas dificultan la lectura
  • Es difícil leer el Grid escrito por otros desarrolladores

• 1/3 no es una fracción, sino un rango de 1 a 3

  • No entiende por qué eligieron esa sintaxis
  • En programación hay mejores sintaxis para representar rangos (por ejemplo, 1..3)

• Sobre Grid Garden y Flexbox Froggy

  • Grid Garden
  • Flexbox Froggy

• No había logrado entender Grid ni Flexbox

  • La última estrategia de layout que usó bien fueron los floats
  • Este artículo le da confianza para usar CSS Grid en su próximo diseño de layout
  • Agradece el artículo por estar tan bien hecho

• Se pregunta si existe una versión introductoria previa de este documento

  • Se perdió en la parte de introducción
  • No entendió qué era un "line number"
  • Se atoró con fracciones como 1/3 y 1/4

• Recomienda mucho Mondrian with auto flow de Jen Simmons

  • Jen Simmons Mondrian
  • Se ve muy bien si cambias el tamaño de la ventana
  • Quiere entender cómo auto flow detecta y rellena los espacios

• Se pregunta por qué la sintaxis se define como 1/2 y 3/4

  • Le parece que una sintaxis como 1-2 o 1->2 sería más fácil de entender

• Le gustan las publicaciones de blog interactivas

  • Recomienda experimentar con las áreas de Grid en una herramienta
  • Ha usado Grid Layoutit durante años, y ajustar espacios se volvió mucho más fácil

• Cree que por primera vez entendió CSS Grid

  • La numeración fue de gran ayuda
  • Es un gran artículo y lo consultará con frecuencia