Especifica el espacio entre las columnas/las filas.
valores
<grid-row-gap> <grid-column-gap>
grid-gap: 10px
20px;
justify-items
Alinea el contenido horizontalmente.
valores
start
end
center
stretch
justify-items: stretch;
align-items
Alinear contenido verticalmente.
valores
start
align-items: start;
center
end
stretch
justify-content
Alinear todo el grid horizontalmente.
valores
start
end
stretch
center
space-around
justify-content: space-around;
space-between
space-evenly
align-content
Alinear todo el grid verticalmente.
valores
start
center
end
stretch
space-around
space-between
align-content: space-between;
space-evenly
Introducción
CSS Grid Layout es un sistema de layout bidimensional basado en el grid que se dedica a
cambiar completamente la manera en la que diseñamos interfaces de usuario basadas en grid.
Basic and Browser Support
Para poder comenzar tienes que definir un elemento de container
con display: grid; definir los tamaños de las columnas y las filas con
grid-template-columns y grid-template-rows, y luego poner a sus
elementos hijos en el grid con grid-column and grid-row.
Desde marzo del 2017, la mayoría de los navegadores apoyaban
no CSS Grid: Chrome (incluyendo Android), Firefox, Safari
(incluyendo iOS), y Opera.
Terminología Importante
Antes de indagar más sobre el concepto de Grid, es muy
importante conocer la terminología
Grid Container
Es el elemento en el cual display: grid es
aplicado. Es el padre directo de todos
los grid items.
Grid Item
Los hijos (descendientes
directos) del grid container.
Grid Line
Las lineas divisoras que
hacen la estuctura del
grid.
Grid Track
El espacio entre dos lineas
de gird adyacentes.
Grid Cell
El espacio entre las lineas de dos filas
adyacentes y dos columnas adyacentes
Grid Area
Un espacio total rodeado por cuatro
lineas de grid