El grid-gap es el espacio entre columnas (grid-column-gap) o filas
(grid-row-gap). Hay que
tener cuidado ya que si el contenedor tiene una altura fija, en el ejemplo tiene 200px de alto y gap de
columna y de row de 1em, el contenido
se puede desbordar.
grid-column-gap y grid-row-gap tiene un shothand que es grid-gap el
primer valor es para los row y el segundo para los column
Las unidades fr son medidas fraccionadas, las cuales ellas ponen el tamaño automaticamente dependiendo del tamaño del padre y de cuanta cantidad de fr querramos. Por lo tanto el fr es una medida proporcional que se adecua el solo tanto al gap como al tamaño de sus elementos siguientes