Crea tu web, tutor html, css

Alineaciones en el Grid

Una cudrícula Grid puede tener un tamaño inferior al del contenedor donde se coloque. Esto significa que es necesario decidir donde se situará el bloque grid en relación a su contenedor: centrado, ajustado a un lateral, rellenando todo el espacio disponible....

Los items también pueden ser más pequeños que las celdas del Grid y también deben alinearse. Tenemos que decidir también la alineación de los items individuales.

Alineaciones en el grid

 

Las alineaciones del contenido del grid puede hacerse a nivel del bloque como un todo (justify-content align-content) y a nivel de items hijos (justify-items align-items).

Las alineaciones en bloque y por items se pueden abreviar con las propiesdades place-content y place-items.

Como alinear el bloque grid

Para alinear todos los items del grid completo se utilizan dos propiedades

justify-content: realiza la alineación horizontal, Se usa cuando los anchos de las columnas no cubren el ancho del bloque grid o de su contenedor

align-content: se ocupa de la alineación verical, en columnas, cuando las celdas no suman el alto del bloque grid.

Es una alineación del bloque formado por todas las celdas del grid, como un todo, respecto al bloque grid y solo tiene sentido cuando las areas de todas las celdas ocupan menos que el bloque Grid.

Por ejemplo si el ancho de todas las celdas más el gap es 200px y el grid tiene un ancho de 450px, queda un vacio de 250px que hay que gestionar con el alineamiento horizontal del bloque de celdas. Lo hacemos con justify-content

Algo similar si las alturas de las celdas no cubren todo el Grid, en este caso se aplica align-content

Considera que las celdas vacias se cuentan a la hora de calcular la posición del bloque, aunque no tengan contenido.

<style>
.grid-caja{
display:grid;
   grid-template-columns: repeat(2,180px);
   grid-template-rows: repeat(4, 60px);
   justify-content: center;
   align-content: center;
   line-height: 60px;
   font-size:20px;
   font-family: arial;
   border: 2px solid blue;
   width:600px;
   height:450px;
}

.grid-caja>div{
   border: 1px solid black;
   background: aliceblue;
   text-align: center;
}
</style>
</head>

<body>
<div class="grid-caja">
   <div>Contenido 1</div>
   <div>Contenido 2</div>
   <div>Contenido 3</div>
   <div>Contenido 4</div>
   <div>Contenido 5</div>
   <div>Contenido 6</div>
   <div>Contenido 7</div>
   <div>Contenido 8</div>
</div>

Alineando un bloque grid en el centro de un contenedor

En este ejemplo alineamos todo el bloque al centro del contendor. Observa que es importante definir al menos la altura del bloque grid, si no se hace la altura la toma como suma de las filas y no se alinearía por que no vería espacio libre vertical.

Los valores disponibles son sencillos: start, center, end para poner el bloque en la izquierda/arriba en el centro o en la derecha/abajo.

otra forma de alinear es distribuir el espacio libre al rededor de los items (space-around), entre los items (space-between) o entre los items y alrededor (space-evenly). Muy similares a los valores usados en el modelo flexbox.

Si no se han definido los anchos o altos existe un opción de alineamiento stretch, que aumenta el tamaño de las celdas para que ocupen todo el espacio disponible. Este es el valor por defecto para las alineaciones, que queda sobre escrita si detallamos los altos o anchos, como en este ejemplo

<style>
.grid-caja{
   display:grid;
   grid-template-areas: '. .';
   grid-template-rows: repeat(3, 60px);
   justify-content: stretch;
   align-content: center;
   line-height: 60px;
   width:600px;
   height:450px;
   bakground-color: #F5F5DC;
   border:1px solid blue;
   padding: 10px;
   font-size:20px;
   font-family: arial;
}
.grid-caja>div{
   border: 1px solid black;
   background: aliceblue;
   text-align: center;
}
</style>
<div class="grid-caja">
   <div>Contenido 1</div>
   <div>Contenido 2</div>
   <div>Contenido 3</div>
   <div>Contenido 4</div>
   <div>Contenido 5</div>
   <div>Contenido 6</div>
</div>
Forzar a ocupar todo el ancho

 

Alinear el grid permite situar todo el bloque completo en relación a los bordes del contenedor o del mismo grid si este es mayor que el area ocupada por las celdas.

Alineando los items

Los contenidos de las celdas del Grid pueden ser más estrechos que las propias celdas, lo que implica un espacio vacio que gestionar mediante las alineaciones, en este caso aplicadas a los items o contenidos en las celdas, bien sea horizontalmente (justify-items) o en vertical (align-items). Estas dos propieades pueden abreviarse con place-items.

Los valores son similares a los usados en la alineación del bloque de celdas dentro del contenedro Grid.

Los items pueden sobreescribir de forma individual los valores que se den aquí.

<style>
.grid-caja{
   display:grid;
   grid-template-areas: '. .';
   grid-template-rows: repeat(3, 60px);
   gap:5px;
   justify-content: center;
   align-content: center;
   justify-items: center;
   line-height: 60px;
   width:600px;
   height:450px;
   background-color: #F5F5DC;
   font-size:14px;
   font-family: arial;
}
.grid-caja>div{
   border: 1px solid black;
   background: aliceblue;
   text-align: center;
   padding: 0 10px
}
</style>
<div class="grid-caja">
   <div>Contenido 1</div>
   <div >Item 2</div>
   <div>Contenido ancho 3</div>
   <div>Contenido 4</div>
   <div >Item 5</div>
   <div style="justify-self:end">Item 6</div>
</div>
Items individuales ajustados al contenedor

En este ejemplo ves que hay dos contenidos mas estrechos que las celdas en que se encuentran, con justify-items podemos llevarlo al lado que queramos. Pero si queremos que cada uno quede alineado de forma diferente podemos usar la alineación individual, como se ha hecho en el item 6

Si pones los justify en stretch todas las celdas van a extenderse para ocupar el máximo posible con lo que desaparecen las diferencias.

 

lateralApdo