Como definir tracks (filas y columnas)

200px X 100px

300px X 100px

100px X 100px

200px X 50px

100px X 50px

300px X 50px

200px X 25px

100px X 25px

300px X 25px

En este ejemplo las columnas miden 200px 300px y 100px (grid-template-columns: 200px 300px 100px;) y las filas 100px 50px 25px (grid-template-rows: 100px 50px 25px;).

El restante espacio en color turquesa, es el espacio que sobra del 100% del contenedor. Como el contenedor .papar tieen 1200px y la suma de las columnas son 600px (grid-template-columns: 200px 300px 100px;) el restante espacio son 600px.

Por tanto el tamaño de las columnas (grid-template-columns) sería:

200px (para la primera columna)
300px (para la segunda columna)
100px (para la tercera columna)

Mientras que el tamaño de las filas (grid-template-rows) es:

100px (para la primera fila)
50px (para la segunda fila)
25px (para la tercera fila)

¡En Grid CSS las alturas pueden tener pocentaje!

Ahora el ejemplo anterior en % tanto en columnas como en filas

En este ejemplo las columnas tienen un 30%, un 50% y un 10% (grid-template-columns: 30% 50% 10%) y el espacio turquesa que sobra es un 10%.

En el caso de las filas, se le ha dao al contenedor una altura fija, tendrían un 50%, 20% y 30% (grid-template-rows: 50% 20% 30%). En este caso la suma de los % da 100% y por eso no sobra espacio debajo

30% X 50%

50% x 50%

10% X 50%

30% X 20%

50% X 20%

10% X 20%

30% X 30%

50% X 30%

10% X 30%