En una cuadrícula CSS (grid), las bandas son las líneas de celdas que pueden estar dispuestas en horizontal (filas) o en vertical (columnas). Es posible definir filas y columnas de forma explícita con ciertas propiedades CSS. Pero, ¿qué sucede cuando un elemento debe ser reubicado y no hay más bandas definidas en el código CSS? ¿Cómo se ajusta a la cuadrícula?
Para estos casos, y solo con el propósito de reubicar un elemento de la cuadrícula en ausencia de bandas explícitas, se generarán filas o columnas de forma implícita, es decir, automáticamente. Estas bandas se pueden modificar con otras propiedades CSS. Conviene distinguirlas para saber cuándo usarlas.
- Banda explícita: definida por el usuario. Se define mediante:
grid-template-rowsgrid-template-columns
- Banda implícita: generada automáticamente. Se modifica con:
grid-auto-rowsgrid-auto-columns
En el artículo anterior sobre la distribución de filas y columnas en una cuadrícula se trata en detalle las propiedades CSS para modificar las bandas creadas de forma explícita, por tanto en este artículo se van a tratar las propiedades CSS que permiten adecuar las bandas generadas de forma implícita.
Propiedades CSS descritas en este artículo:
| Propiedad | Descripción |
|---|---|
grid-auto-rows | Indica el tamaño de las filas implícitas. |
grid-auto-columns | Indica el tamaño de las columnas implícitas. |
grid-auto-flow | Algoritmo de colocación automática. |
Las propiedades ‘grid-auto-rows’ y ‘grid-auto-columns’
Con la propiedad CSS grid-auto-rows es posible especificar el tamaño para las filas que se crean de forma implícita, es decir, que no tienen un tamaño especificado a través de la propiedad grid-template-rows. Por tanto, en caso de que un elemento de la cuadrícula tenga que ser ubicado en una nueva fila generada automáticamente, podrá tener una altura determinada.
Por su parte, la propiedad CSS grid-auto-columns permite indicar el tamaño de las columnas implícitas, generadas de forma automática: aquellas que no se definen de forma explícita mediante la propiedad grid-template-columns. En este sentido, si un elemento HTML tiene que ser ubicado en una columna automática de la cuadrícula, también podrá tener una anchura especificada.
Valores
Los valores de las propiedades grid-auto-rows y grid-auto-columns pueden ser tamaños indicados mediante algunas unidades de longitud. También admiten algunas palabras clave y las funciones minmax() y fit-content().
Lista de valores:
| Valor | Descripción |
|---|---|
| tamaño | Tamaño en unidades de longitud. |
max-content | Usa el tamaño máximo del contenido. |
min-content | Usa el tamaño mínimo del contenido. |
auto | Ajuste automático de tamaño. |
minmax() | Rango de tamaño entre dos valores. |
Referente al tamaño, se indicará mediante valores positivos mediante unidades de longitud como puede se un porcentaje, píxeles o centímetros. También puede usarse la unidad relativa de fracciones fr. Una unidad fraccional (1fr) corresponde a la fracción del espacio disponible en el contenedor de la cuadrícula.
Con el max-content se estará usando el tamaño máximo del contenido para cada uno de los elementos hijos (ítems) de la banda en la cuadrícula.
El valor min-content permite indicar el tamaño mínimo del contenido de cada uno de los elementos hijos (ítems) de la banda en la cuadrícula.
Usando el valor auto el tamaño del ítem se ajustará de forma automática. Como máximo usará el tamaño máximo del contenido más grande de los ítems de la banda. Como mínimo usará el tamaño más pequeño del contenido.
Con el valor auto, los elementos hijos (ítems) pueden ser estirados con las propiedades align-content y justify-content.
Mediante la función minmax() se define un rango de tamaño, por lo que admite dos parámetros de longitud separados por una coma. El primer tamaño es el mínimo, y el segundo es el máximo. De esta forma, el tamaño del ítem se ajustará dentro del rango indicado. Por ejemplo: minmax(100px, 200px).
Veamos un ejemplo en código CSS:
.cuadricula {
grid-auto-columns: 1fr;
grid-auto-rows: minmax(50px, auto);
}
Múltiples valores
Las propiedades grid-auto-rows y grid-auto-columns admiten múltiples valores estando separados por un espacio en blanco. Cada valor que se introduce define el tamaño para una nueva banda generada automáticamente. Tantos valores, tantas bandas (filas o columnas) se estará definiendo.
El orden es el siguiente: el primer valor se aplicará a la primera banda, el segundo a la segunda, y así sucesivamente, hasta el último valor, que se aplicará al resto de bandas implícitas que se puedan llegar a generar.
Veamos un ejemplo. Código CSS:
.cuadricula {
grid-auto-columns: 10px 20px 30px;
}
Si se crea una primera columna implícita, sus celdas tendrán un ancho de 10 píxeles. Si luego además se crea una segunda, sus celdas medirán 20 píxeles. El resto de columnas implícitas medirán 30 píxeles.
La propiedad ‘grid-auto-flow’
La propiedad CSS grid-auto-flow ayuda a controlar la colocación automática de los elementos dentro de la cuadrícula. Esta propiedad es un buen complemento para las propiedades anteriores, ya que permite modificar el algoritmo de colocación, como sería decidir si se quiere una fila o una columna.
Lista de valores:
| Valor | Descripción |
|---|---|
row | Añade los ítems en una fila implícita. |
column | Añade los ítems en una columna implícita. |
dense | Intenta rellenar espacios vacíos en la cuadrícula. |
Los valores de esta propiedad pueden tomar dos formas: una sola palabra clave (row, column o dense) y/o dos palabras clave separadas mediante un espacio en blanco (row dense o column dense).
Con el valor dense se intenta rellenar los espacios disponibles de forma eficiente. En vez de reubicar los nuevos elementos en filas o columnas según convenga, el algoritmo de colocación buscará espacios vacíos en la cuadrícula.
Esto significa que, por ejemplo, en caso de existir zonas de la cuadrícula que no estén ocupadas, el algoritmo de colocación intentará llenar esas zonas antes de crear de forma implícita nuevas filas o nuevas columnas.
