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-aroundspace-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; obtemos este resultado:

celda 1
celda 2
celda 3
celda 4

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

Por ejemplo, align-content: center;

 

celda 1
celda 2
celda 3
celda 4

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

 

celda 1
celda 2
celda 3
celda 4

 


Enero-2019 (V 2.0)
Pág. 13.32
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook ,    G+            Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.