Unidad 13. Posicionamiento. Flexbox. Grid (XXXII)

13.23. Rejilla. Justify-content

Alinear la rejilla completa

Si el contenedor de la rejilla es más grande que las dimensiones del conjunto de filas y columnas de la rejilla, podemos alinear la rejilla completa respecto a su contenedor, podemos hacerlo respecto los ejes horizontal y vertical.

Con la propiedad justify-content; alineamos respecto al eje horizontal, puede tomar los valores center; start, end, strectch, auto, space-around y space-between:

Por ejemplo, en el siguiente código vemos que las dimensiones del contenedor de la rejilla son 300px de anchura y 20px de altura, mientras que las columnas suman 240px, y las filas suman 120px.

grid-template-columns: repeat(8, 30px); grid-template-rows: repeat(4, 30px); width: 300px; height: 200px; justify-content: center;

Por ejemplo, si aplicamos justify-content: center; obtenemos este resultado:

Con la propiedad align-content; alineamos respecto al eje vertical.

Por ejemplo, align-content: center;

 

Si aplicamos las anteriores alineaciones a la vez, justify-content: center; align-content: center; obtenemos: