El grid CSS: distribuir el espacio
Aunque es posible conrolar al detalle como se van disponer los items en las celdas de la cuadrícula grid, en ocasiones interesa que el propio CSS decida tamaños y disposiciones. Esto lo podemos hacer con las reglas relativas a auto y a flow.
La distribución del espacio disponible en el grid afecta lógicamente a los alineamientos del propio grid y de los items hijos. Para controlar estos alineamientos disponemos de propiedades que alinean a los hijos respecto a ls filas (align-items) o a las columnas (justify-items), ambas pueden agruparse en una sola place.
Cada hijo puede modificar estos alineamientos con la propiadad align-self y justify-self (agrupables bajo la propiedad place).
Para todo el bloque tenemos justify-content, que nos permite alinear a los hijos entre el principio o final de cada fila y align-content, similar pero alinea a lo largo de la columna.
Todas estas propiedades nos serán útiles cuando usemos una cuadrícula más estrecho que su contenedor. Solo recuerda que los valores right, left, top o down que podrían ser usados en estas alienaciones se sustituyen por start, end.
Además de las unidades habituales en CSS para tamaños, el modelo Grid nos ofrece más opciones y funciones:
- fr: es una unidad relativa, una fracción del espacio libre que pueden ocupar los items, prácticamente similar a auto.
- min-content: tamaño mínimo para ajustar el contenido, pero ojo si tienes la frase Titulo de Grid, el contenido mínimos es el ancho de la palabra Título
- max-content: espacio máximo necesario para alojar todo el contenido completo
Las funciones que acepta son
- repeat(reps, valor): se usa para escribir menos: repite valor tantas veces omo indique reps. Valor es cualquier tamñao aceptado por el Grid
- min(mn): el tamañño mínimo será mn
- max(mx): el tamaño no pasa de mx
- minmax(mn, mx): mantiene el ancho o altoentre dos valores
- fit-content(arg): usa arg para el tamaño si es mayor que auto y menor que max-content.
Ajustemos las celdas
Podemos describir un tamaño automático para filas y columnas de la cuadrícula, usamos la propiedad grid-auto-columns y grid-auto-rows. Estas propiedades permiten que el navegador ajuste los anchos y altos con un solo valor, es decir, si damos a grid-auto-columns el valor 100px, cada columna va a tener este ancho por defecto. Los valores de tamaños usan las unidades habituales en CSS además de fr (fracción del espacio libre, va de 0 a 1)
<style>
.grid-caja{
display: grid;
gap:5px;
grid-template-areas:'x x';
grid-auto-columns: 100px;
grid-auto-rows: 100px;
line-height:100px;
text-align:center
}
.grid-caja>div{
border:1px solid blue;
background:aliceblue;
}
</style>
Observa que en esta regla hemos definido una cuadrícula con dos columnas y dos filas usando areas, y en lugar de puntos he puesto letras. Estas areas no identifican ningún item en particular, pero pueden ser usadas para identificar celdas
Ahora vamos a rellenar la cuadrícula con los items del contenido.
<div class="grid-caja">
<div>Item num 1</div>
<div>Item num 2</div>
<div>Item num 3</div>
</div>
Prueba el ejemplo completo para ver el resultado. Observa que aunque no se han definido filas, el navegador agrega una fila para alojar el tercer item, Para los anchos y altos se usan los valores 250px y 100px respectivamente.
Es posible incluso añadir un item en un area fuera de la cuadrícula: sta crecerá para alojarlo usando los tamaños indicados en las propiedades auto definidas inicialmente
<div class="grid-caja">
<div>Item num 1</div>
<div>Item num 2</div>
<div>Item num 3</div>
<div style="grid-area: 2/4/2/5">Item extra</div>
</div>
Como podrás ver el navegador rehace la cuadrícula añadiendo las columnas necesarias (en este caso 3) y reorganiza los tiems para la nueva distribución de las celdas. Las nuevas columnas toman el valor grid-auto-columns (o auto si no se indica ningun ancho). Es como si el valor de grid-template-areas se reajustara a 'x x x x x '
Los anchos de las celdas siempre se pueden fijar a un valor numérico como cualquier otra dimensión de las usadas en reglas CSS
El modelo Grid ofrece también opciones par automatizar el ancho y el alto de columnas y filas
Las funciones
Existen funciones que permiten automatizar el dimensionado de las celdas para alojar los items de contenido. Son funciones simples que afinan algo el uso del simple valor auto.
<head>
<style>
.container{
width:600px;
border:2px solid red; }
.grid-caja{
display: grid;
gap:5px;
grid-template-columns: minmax(max-content, 80px) fit-content(150px) max(80px);
grid-template-rows: repeat(2, 50px);
line-height:50px;
text-align:center
}
.grid-caja>div{
border:1px solid blue;
background:aliceblue;
}
</style>
</head>
<body>
<div class="container">
<div class="grid-caja">
<div>Item num 1</div>
<div>Item num 2</div>
<div>Item num 3</div>
<div>Item num 4</div>
<div>Item num 5</div>
<div>Item num 6</div>
</div>
</div>
</body>
Este ejemplo es muy completo para ver como trabajan las funciones. Por partes:
Comenzando por la más sencilla: repeat(2, 50px), crea dos filas con 50px de alto cada una. Todo lo que no quepa en esa altura se verá fuera o no, dependiendo de si se usa la propiedad overflow
Los límites:
minmax(max-content, 100px) es fácil de xplicar: mantiene el ancho de la columna entre max-content (ajustarse al contenido completo) y un máximo de 100px
max(80px), simplemente limita el ancho máximo de la columna a 80px.
La más difícil de entender es fit-content(valor), pese al nombre no ajusta la celda al contenido, si no que marca el ancho máximo en max-content. El argumento tiene que ser mayor al valor de auto. El ancho resultante de esta función es igual al argumento si está entre el valor auto y max-content. Si no está en este intervalo, el resultado es el menor valor enre auto y max-content. Compruébalo en el ejemplo.