El atributo flex-grow solo funciona con Flexbox, por lo que no lo puedes aplicar directamente a Grid Layout.
De todos modos, el mismo comportamiento de comentas de 1fr, que has aplicado a las columnas es posible aplicarlo para conseguir lo mismo que haces con flex-grow.
- 1fr indica que tome todo el espacio disponible. Es lo mismo que flex-grow: 1;
- Si tienes varios 1fr se dividirían el espacio proporcionalmente entre ellos, lo mismo que si tienes varios flex-grow: 1
- 2fr sería que ocupe proporcionalmente 2 veces el espacio disponible que tendrían los elementos con 1fr. Es lo mismo que flex-grow: 2.
Como estás usando 1fr para dividir el espacio en tus columnas creo que no tendrás problema en entender el concepto. Lo que creo que te hace falta es entender también que puedes perfectamente dividir el espacio de las filas, con las mismas propiedades, incluso puedes definir la división de espacios de filas y columnas al mismo tiempo en la misma rejilla. Es realmente muy versátil.
.mi-grid {
display: grid;
grid-template-columns: 1fr 390px;
grid-template-rows: 200px 1fr;
column-gap: 1.1rem;
margin: 0 1rem;
}
Por ejemplo, en este caso estamos aplicando una rejilla de dos columnas... pero además estamos diciendo cómo se van a distribuir los espacios las filas. La primera usará el espacio de 200px y la segunda el restante.
Lo puedes combinar con todas las unidades fr que necesites y por supuesto con todas las filas que sean necesarias para adaptar los elementos de tu rejilla. El resultado es lo mismo que si tuvieras los elementos con flex-grow, pero con CSS Grid. Creo que en este artículo te pueden aclarar mejor las unidades fr.