Para distribuir nuestros elementos en el grid, podemos añadir en el padre ciertas propiedades, entre ellas están:

• grid-template-columns y grid-template-rows Establece el el tamaño de las columnas/filas dandole una lista de unidades
• grid-template-areas Nos ayuda para layouts con muchos elementos distribuidos de multiples formas ya que referenciamos mediante texto el nombre de cada area
• grid-template shortland de grid-template-columns, grid-template-rows y grid-template-areas
• grid-auto-columns y grid-auto-rows Define el tamaño de las columnas y de las filas de los elementos del grid
• grid shortland de grid-template-columns, grid-template-rows, grid-template-areas, grid-auto-flow,grid-auto-columns y grid-auto-rows
• column-gap, row-gap, grid-column-gap, grid-row-gap, gap y grid-gap Establece la distancia entre las columnas y filas
• align-content Alinea las columnas en el eje vertical
• justify-content Alinea las columnas en el eje horizontal
• justify-items Establece el align-self de todos los descendientes directos en el eje horizontal
• place-items Establece el align-items y el justify-items de todos los elementos
• place-content Establece el align-content y el justify-content de todos los elementos

En el hijo podemos añadir otra serie de propiedades:

• grid-column-start, grid-column-end, grid-row-starty grid-row-end Indica la columna/fila en la que empieza/termina el elemento
• grid-area el elemento es referenciado por el nombre que se le introduce al grid-template-area del padre y posiciona el elemento en ese area
• justify-self Posiciona el elemento en el eje horizontal
• align-self Posiciona el elemento en el eje vertical
• place-self Establece el place-self y el justify-self del elemento