En la lección anterior de Grid colocaste elementos con grid-column: 1 / 3, span y 1 / -1. Esa forma corta sale de dos propiedades largas, y con ellas y unas pocas más controlas también las filas, el orden y el tamaño de cada pista.

grid-column junta dos propiedades:

.cartel {
  grid-column-start: 1;   /* empieza en la línea 1 */
  grid-column-end: 4;     /* termina en la línea 4: ocupa tres columnas */
}
/* lo mismo, en corto: */
.cartel { grid-column: 1 / 4; }

Las dos admiten números negativos (desde el final) y span (cuántas columnas ocupa):

.lateral  { grid-column-start: 2; grid-column-end: -1; }    /* de la 2 a la última */
.destacado { grid-column-start: 2; grid-column-end: span 3; } /* tres columnas desde la 2 */

Si solo escribes grid-column-start, el elemento ocupa una columna desde esa línea.

Las filas funcionan igual: grid-row-start, grid-row-end y la forma corta grid-row.

Lo que no colocas a mano, la retícula lo va poniendo en orden, celda a celda. order cambia ese orden igual que en Flexbox:

grid-template-rows define las filas como grid-template-columns define las columnas. Puedes mezclar unidades: las fijas se reservan primero y los fr se reparten lo que sobra.

.pagina {
  display: grid;
  grid-template-columns: 240px 1fr;      /* menú fijo y contenido flexible */
  grid-template-rows: auto 1fr auto;     /* cabecera, contenido y pie */
  min-height: 100vh;
}

1fr 3fr son una parte y tres partes del espacio libre: la segunda pista mide el triple.

En el juego coloca la manta de cada perro justo donde duerme. La parte 1 repasa lo básico de Grid y el resto usa lo de esta página. Las líneas discontinuas de la retícula llevan su número.

• Confundir el orden de grid-area: son filas y columnas alternadas, no «x, y, ancho, alto».
• Contar columnas en vez de líneas: tres columnas van de la línea 1 a la 4.
• Olvidar que -1 es la última línea de la retícula definida; si hay filas creadas solas, no llega a ellas.