Áreas de cuadrícula con nombre simple

Pienso en las áreas de cuadrícula con nombre en CSS Grids como “trae tu propio azúcar sintáctico”. No los necesitas en absoluto (puedes expresar la ubicación de la cuadrícula de otras maneras), pero puedes hacer que esa ubicación sea más intuitiva. Y oye, si me equivoco en eso, corrígeme en los comentarios.

Supongamos que configuremos una cuadrícula de 3 columnas:

.grid {  display: grid;  grid-gap: 1rem;  grid-template-columns:      200px  1fr  1fr;}

No hay filas definidas allí; están implícitos y aparecerán según sea necesario. Podríamos definirlos, pero no lo hacemos, porque como en la mayoría de las situaciones en el diseño web, no nos importa la altura de los elementos: la altura crecerá según sea necesario para acomodar el contenido.

Ahora, ¿cómo colocamos algo en esa posición superior izquierda de la cuadrícula? Podríamos decirle a la parrilla que lo coloque allí así:

.item {  grid-column: 1 / 2; /* start at the first grid column line and end at the second */}

Eso funciona, aunque será .itemmejor que sea el primer hijo de .grid. De lo contrario, es posible que se coloque implícitamente algo más allí y .itempase a la siguiente fila abierta. Si quisiéramos estar muy seguros de colocarlo en la parte superior izquierda, también podríamos hacer la fila:

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

Ahora seguramente estará en la parte superior izquierda, incluso si otros elementos se colocan claramente allí (simplemente se superpondrán). Incluso podemos acortar las cosas con la grid-areapropiedad:

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

Todos esos 1 y 2 pueden ser bastante intuitivos por ahora, pero los números se vuelven un poco excesivos en cuadrículas más complejas que involucran la ubicación de columnas y filas.

Mira esto. Mientras definimos las columnas, podemos nombrarlas con una propiedad separada:

.grid {  display: grid;  grid-gap: 1rem;  grid-template-columns:      200px  1fr  1fr;  grid-template-areas:    "pro    a    b"    "pro    c    d";}

Cada grupo citado grid-template-areases una fila. Dentro hay nombres que acabo de inventar. Podría ser casi cualquier cosa, siempre que tenga sentido para ti. ¿Ves cómo la palabra “pro” se repite dos veces en dos filas? Eso es importante, ya que dice que podríamos colocar un elemento de la cuadrícula donde está ese valor “pro” y estará en la primera de tres columnas y abarcará dos filas. Bastante intuitivo, ¿no?

Lo colocamos así:

.pro-features {  /* rather than */  grid-area: 1 / 1 / 2 / 3;  /* we can now do */  grid-area: pro;}

Aquí está ese ejemplo simple:

¿Quieres ser aún más descriptivo con una cuadrícula? Intento dibujarlo en sus comentarios CSS.