En otras palabras, la cantidad de valores máximos corresponden al siguiente esquema (un espacio de barra esta dado como [espacio]):
- { grid:
- grid-template-rows / [espacio]
- grid-template-columns [propiedad opcional]
- grid-template-areas [propiedad opcional]
- grid-auto-rows [propiedad opcional]
- grid-auto-columns [propiedad opcional]
- grid-auto-flow; [propiedad opcional]
- }
Es decir, la regla 'grid' con sus valores de atajo se vería así:
grid: 100px 1fr / 1fr 2fr 1fr;
La unidad 'fr' (fraction) es aplicable SOLO para las propiedades CSS flex y grid. 'fr' vale cada fracción de espacio disponible que cada elemento debería ocupar; y según la suma total de unidades 'fr'.
Por ejemplo, esta línea pide que cada uno de los tres elementos ocupe una fracción tomando como referencia la suma de todas las unidades fr de esa regla CSS.
1fr 2fr 3fr = 6fr
1/(suma de fr) 2/(suma de fr) 3/(suma de fr)
Una explicación más detallada es:
Utilidad en estricto orden de cada subpropiedad de la propiedad 'grid:'...;
Tener en cuenta que los valores 'auto' (abajo) dan dimensiones según el contenido dentro del item y del espacio disponible. En el ejemplo de abajo, el primer valor de 'grid:...' da la altura de cada item. El contenedor recibe las siguientes reglas grid:
.container { display: grid;
grid: 150px / auto auto auto;
grid-gap: 10px; }
Aunque cada caja gris es un elemento 'div', la cantidad de columnas ajustadas en el ancho del navegador es dada por la cantidad de valores 'auto' en la propiedad 'grid:...;'. Recordemos que en este contexto, 'grid' tiene valores atajo que luego explicaremos.
En 'grid:.../....;' se pide que únicamente los items de la primera fila (horizontal) tengan una altura de 150px. ¿Pero y qué con la segunda fila? Su altura dependerá de su contenido a menos que se explícite valores mediante 'grid-auto-rows' o función 'minmax()'. Por eso, aunque copie los elementos HTML de la primera fila y los copie más abajo, estos tendrán las dimensiones de la segunda fila.
Ejemplo con propiedad grid, alto del contenedor y tres columnas con ancho automático:
Otro ejemplo con valores grid en pixeles y justificado en centro:
Subpropiedad 'grid-template-rows'
Da la altura del contenedor. Es el primer valor en el atajo 'grid:...;'
Otro ejemplo usando la función repeat() en 'grid-template-rows:...;' para crear (de arriba hacia abajo) espacios para crear filas. OJO: 'grid-template-rows' NO crea columnas. El espacio inferior de color morado ha sido creado como tercera fila.
Otra forma de establecer filas desde 'grid-template-rows:' es dando valores (o funciones, como 'max-content' o 'min-content') a cada fila dada explícita:
Da cantidad y ANCHO de columnas (puede ser auto) en un contenedor grid. En el ejemplo de abajo, los seis elementos divs tendrán dos columnas para ser distribuidos. Las reglas para el elemento contenedor son:
También se pueden combinar valores en pixeles y %:
Nombra áreas dentro de un contenedor grid. Gracias a cada nombre de área se le puede otorgar propiedades.
En otro ejemplo, cada punto luego del nombre de las áreas en 'grid-template-areas:...' es una nueva celda vacía añadida. El número de puntos (separados por espacio) debe coincidir con el número de columnas en el grid.
Por otro lado, según esta regla pedimos que las áreas nombradas como 'cosa' ocupen, en ESTE caso, las dos primeras celdas del grid.
En otras palabras, se pide eso:
En otro ejemplo, se asignan nombres de áreas a una grilla de 6 columnas y 3 filas: Y cada nombre es el nombre asignado a cada área que ocupará cada celda.
En regla grid CSS, debería ser así:
{ grid-template-areas:
cabz cabz cabz cabz cabz cabz
menu cntr cntr cntr dere dere
menu abaj abaj abaj abaj abaj; }
Y se mostrará así en el browser. Allí vemos que el área nombrada como 'menu' ocupa ciertas celdas (según lo definido en 'grid-template-areas:'), y que el área nombrada como 'abaj' ocupa también ciertas celdas y no otras:
Luego, gracias a la propiedad de item grid 'grid-area', se asigna la celda correspondiente a ese item. Similar a 'grid-area: [nombreCelda];':
Se recomienda que cada nombre de área asignada en 'grid-template-areas: ' tenga igual cantidad de letras (con un nombre identificable, obvio) para poder 'ver' la asignación de cada área de forma agrillada y así evitar confusiones al armar asignaciones. Por ejemplo, en la siguiente grilla es confuso qué columna o grilla tiene asignada un área:
{ grid-template-areas:
cabz AreaCabezote AreaCabezote AreaCabezote uno uno
menu menuCentrado menuCentrado titu titu titu
areaAbajo areaAbajo menu1 menu1 menu1 menu1; }
Define la ALTURA de una fila de elementos que, si buen se encuentran en la estructura HTML, la presencia de esa fila NO ha sido definida en la propiedad 'grid-template-rows:...;'. En otras palabras, la propiedad 'grid-auto-rows' afecta a las filas no implícitas.
a VALORES
Define el ANCHO de columnas que, si buen se encuentran en la estructura HTML, la presencia de esa columna NO ha sido definida en la propiedad 'grid-template-columns:'. En otras palabras, la propiedad 'grid-auto-columns' afecta a las columnas no implícitas.
OJO; 'grid-auto-column' NO crea columnas, solo define las dimensiones en caso de haber nuevas columnas implícitas (es decir, no definidas en 'grid-template-columns:'. En el ejemplo de abajo, ya que hemos definido solo dos columnas en 'grid-template-columns: 1fr 1fr;', cada nuevo elemento div se insertará únicamente en esas columnas.
'grid-auto-columns' afecta al eje principal. Es decir, si el eje está omitido, entonces es default (se activa eje 'fila') en donde se altera la altura de los elementos.
En otro ejemplo, aquí CON 'grid-template-columns: 1fr 1fr 1fr;'. Los elementos rojos y naranjas presentan su propio porcentaje de ancho. El contenedor (fondo negro) tiene ancho 100%) por default.
En otro ejemplo, aquí SIN 'grid-template-columns: 1fr 1fr 1fr;'. Y el 'grid-auto-columns: 50%; ' afecta a los elementos morados, y el resto de elementos mantendrán su porcentaje en relación.
Define cómo son colocados los elementos del contenedor 'display: grid;'. Decide si nuevos elementos deben ocupar filas o columnas.
Valores de grid-auto-flow: [valor];
Recordar:
En el siguiente ejemplo, las columnas se definen en 'grid-template-columns: [col] [col] [col];' y la colocación de los items se la da en 'grid-auto-flow: ...;' con el valor 'row' (default) y 'grid-gap:..;' para dar separación entre elementos de la grilla:
Debajo, otro ejemplo con el valor 'column' pero añadiendo mediaQuerys para crear filas a medida que el ancho del browser es alterado: al reducirse a 550px o menos se cambiará a 4 columnas por fila y las columnas pasarán a ser filas.
Debajo, otro ejemplo con el valor 'dense'. Con este valor los elementos grid 'ocupan' cada espacio vacio en el esquema del contenedor grid. Y solo aplica en elementos que no contienen valores explícitos. En otras palabras, elementos colocados explícitamente tienen prioridad sobre los elementos colocados en auto, por lo que no se verán afectados por 'grid-auto-flow: dense':