Áreas de grid

Ya dividimos la tarjeta en tres columnas y extendimos el encabezado. Vamos bien, pero la distribución todavía no coincide con el diseño: la descripción quedó en la tercera columna, la más estrecha, y se divide en demasiadas líneas.

Para corregirlo, debemos cambiar el orden visual de los elementos. Ya conocemos order, pero en este caso es más cómodo describir toda la plantilla de la tarjeta con áreas de grid.

Un área de grid es una parte de la cuadrícula que puede tener un nombre. Quien desarrolla la página elige ese nombre. En nuestros ejemplos, los nombres empiezan con una letra y pueden incluir números, guiones y guiones bajos. Por ejemplo: header, section-2 o user_avatar. Conviene elegir nombres que describan el contenido del área.

Usaremos áreas de grid para colocar los elementos como en el diseño. Empecemos por el encabezado y el bloque del precio. Los nombres title y price les quedan bien.

Para describir la estructura del grid mediante áreas se usa grid-template-areas. Allí se escriben sus nombres: cada fila se encierra entre comillas y las columnas se separan con espacios. Para que un área ocupe varias columnas, repetimos su nombre las veces necesarias.

Queremos que el encabezado ocupe dos columnas y que el precio pase a la primera fila:

.card {
  display: grid;
  grid-template-columns: 260px 165px 75px;
  grid-template-areas: "title title price";
}

Pero describir la plantilla no basta: el navegador no sabe a qué elementos nos referimos. Para vincular un elemento grid con el nombre de un área usamos grid-area. ¡En grid-area no se necesitan comillas!

.title {
  grid-area: title;
}

.price {
  grid-area: price;
}

Este código vincula el encabezado con el área title y el bloque del precio con price. Ambos se colocarán según grid-template-areas, sin importar su orden en el HTML.

Describamos la primera fila con grid-template-areas y asignemos las áreas al encabezado y al precio. También comprobaremos que ya no hace falta extender el encabezado con grid-column.

h1 {
  grid-area: title;
}