Propiedades: Grid container

display
grid | inline-grid | subgrid

.container {
  display: grid;
}

grid-template-columns
track-size ... | [line-name] track-size ...

.container {
  grid-template-columns: 1fr 1fr;
}

Define las columnas de la cuadrícula con una lista de valores separados por espacios. Los valores representan el tamaño de la columna y el espacio entre ellos representa una línea de cuadrícula. El ejemplo crea 3 columnas.

track-size en % o en px o en fr (fracción de espacio). Si queremos indicar un número de columnas iguales podemos utilizar el valor repeat(numero, medida)

grid-template-rows
track-size ... | [line-name] track-size ...

.container{
  grid-template-columns: 40px auto 50%;
  grid-template-rows: 25% 100px auto;
}

Define las filas de la cuadrícula con una lista de valores separados por espacios. Los valores representan el tamaño de la fila y el espacio entre ellos representa una línea de cuadrícula.

El ejemplo crea una cuadrícula 3 columnas y 3 filas, con las dimensiones indicadas.

grid-template-areas
"grid-area-name | . | none ..." "..."

.item-a {
  grid-area: cabecera;
}
.item-b {
  grid-area: cuerpo;
}
.item-c {
  grid-area: pie;
}

.container {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "cabecera cabecera cabecera"
    "cuerpo cuerpo cuerpo"
    ".      pie    pie";
}

Define un área de cuadrícula haciendo referencia a los nombres de las áreas de cuadrícula que se especifican con la propiedad grid-area.

Hay que poner las comillas indicadas. El punto deja un lugar en blanco.

El ejemplo crea una rejilla de 3 columnas y 3 filas. Toda la fila superior estará formada por la cabecera. Toda la fila del medio estará formada por el cuerpo. La tercera fila estará formada por una celda vacía (el punto) y el pie ocupará las dos últimas fracciones de espacio.

Cada fila en su declaración debe tener el mismo número de celdas.

Se puede usar cualquier número de puntos adyacentes para declarar una sola celda vacía. Mientras los puntos no tengan espacios entre ellos, representan una sola celda.

grid-template
none | grid-template-rows / grid-template-columns

.container {
  grid-template: 100px 1fr 50px / 1fr 1fr;
}

Propiedad abreviada (shorthand) de grid-template-rows, grid-template-columns, y grid-template-areas en una sola declaration.

El valor none establece las tres propiedades a sus valores iniciales.

El ejemplo crea una rejilla de 3 filas de alto distinto y dos columnas iguales.

grid-column-gap ó grid-row-gap
numero_con_unidades

.container {
  grid-template-columns: 200px 50px 100px;
  grid-template-rows: 180px auto 180px; 
  grid-column-gap: 20px;
  grid-row-gap: 15px;
}

Especifica la separación entre las columnas y/o las filas. La especificación W3C indica que es el ancho de las Grid-Lines.

Unidades: cualquier valor de unidad válido en css.

grid-gap
numero_separacion_filas numero_separacion_columnas

.container{
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 50px auto 100px; 
  grid-gap: 10px 15px;
}

grid-auto-flow
row | column | row dense | column dense|

Si hay elementos de cuadrícula que no quedan colocados explícitamente en la cuadrícula, el algoritmo de auto-placement actúa para colocar automáticamente los elementos. Por defecto es row.

dense: indica al algoritmo de colocación automática que intenta llenar los hecos anteriores en la cuadrícula si aparecen elementos más pequeños despues.

justify-content
start | end | center | stretch | space-around | space-between | space-evenly

align-content
start | end | center | stretch | space-around | space-between | space-evenly

A veces, el tamaño total de la cuadrícula puede ser menor que el tamaño de su contenedor Grid. Esto puede ocurrir si todos los elementos de la cuadrícula están dimensionados con unidades absolutas como px. En este caso, podemos configurar la alineación de la cuadrícula dentro del contenedor de cuadrícula.

Esta propiedad alinea la cuadrícula respecto al eje row (opuesto a lo que hace la propiedad  align-content que lo hace respecto al eje column).

justify-items
start | end | center | stretch

align-items
start | end | center | stretch

Alinea el contenido dentro de un elemento de cuadrícula respecto del eje row  (opuesto a lo que hace align-items que lo hace respecto al eje column).

Este valor se aplica a todos los elementos de la cuadrícula que hay dentro del contenedor padre. Esto se puede hacer de forma individual con la propiedad align-self de los grid-itmes.