CSS GRID

Grid Container: Elemento padre que va a tener puesto un nuevo tipo de display (display: grid). Nos permite colocar otras propiedades para manipular nuestro layout.

Grid Item: Son elementos que vamos a manejar. Seran filas o columnas que vamos a poder manejar a nuestro gusto.

Nota: son hijos directos de grid (Grid Container).

Grid Line: Lineas divisorias horizontales y verticales.
Grid Track: Espacio entre dos líneas adyacentes(filas y columnas).
Grid Cell: Celdas, espacio en dos filas adyacentes y 2 columnas adyacentes.
Grid Area: Espacio rodeado por 4 grid lines

Propiedades

grid-template-columns: Define el número de columnas en un grid layout así como el tamaño de cada columna.
Con el siguiente ejemplo creamos 3 columnas de 200px de ancho cada una, cabe destacar que podemos asignar cualquier tamaño a cualquiera de las columnas y utilizar cualquier unidad de medida.
Ejemplo: grid-template-columns: 200px 200px 200px;

grid-template-rows: Define el nombre de las líneas y las funciones de tamaño de línea de grid rows.
Con el siguiente ejemplo indicamos el tamaño de cada una de nuestras filas, en este caso solo definimos la altura para la primera (100px) y segunda (200px) fila.
Ejemplo: grid-template-rows: 100px 200px;

grid-template: Podemos definir filas y columnas en la misma linea.
Ejemplo: grid-template: 100px 200px / 30% 50% 20%;

grid-column-gap: Permite definir el espacio entre columnas.
Ejemplo: grid-column-gap: 20px;

grid-row-gap: Permite definir el espacio entre filas.
Ejemplo: grid-row-gap: 20px;

grid-gap: Permite definir el espacio entre filas y columnas en una misma linea.
Ejemplo: grid-gap: 30px 10px;

fr: Unidad de medida que representa una fracción.
repeat(number, value): Permite repetir una valor un determinado número de veces.
minmax(min, max): Permite definir un mínimo y máximo.
grid-template-areas: Especifica nombres para cada una de las grid areas.
grid-column-start: Definimos en que linea empieza.
grid-column-end: Definimos en que linea termina.
grid-column: Definimos en que linea de las columnas empieza y donde termina.
grid-row: Definimos en que linea de las filas empieza y donde termina.
grid-auto-flow: Permite cambiar el flujo automatico del grid, por defecto su valor es row pero podemos cambiarlo a column.
grid-auto-columns: Permite un valor por defecto a las columnas que no han sido asignadas. Ejemplo: grid-auto-columns: 200px 200px 200px 200px;
grid-auto-rows: Permite un valor por defecto a las filas que no han sido asignadas. Ejemplo: grid-auto-rows: 50px 100px;
justify-items: Permite alinear el contenido de forma horizontal y puede recibir 4 valores (start, end, center, stretch), por defecto viene con el valor strecth.
align-items: Permite alinear el contenido de forma vertical y puede recibir 4 valores (start, end, center, stretch), por defecto viene con el valor strecth.
justify-self: Permite manipular el elemento seleccionado en sentido horizontal y puede recibir 4 valores (start, end, center, stretch).
align-self: Permite manipular el elemento seleccionado en sentido vertical y puede recibir 4 valores (start, end, center, stretch).
justify-content: Permite alinear el contenido de forma horizontal y puede recibir 7 valores (start, end, center, stretch, space-around, space-between y space-evenly).
align-content: Permite alinear el contenido de forma vertical y puede recibir 7 valores (start, end, center, stretch, space-around, space-between y space-evenly).

Links de Interes

CSS Grid Layout - MDN
Complete Guide to Grid - CSS Tricks
CSS Grid Layout Module Level 1 - W3C
CSS Grid Tutorial
Explicit vs Implicit Grid
CSS Grid Examples
Grid Garden