duduromeroa.com

Breve estudio de propiedades CSS GRID (Marz. 17-2023)

Ir a estudio de propiedad CSS Flex

DIFERENCIAS ENTRE CSS FLEX BOX y GRID

SINTAXIS DE CSS GRID. COMUNICA AL NAVEGADOR:

TERMINOLOGÍA


PROPIEDAD 'DISPLAY: GRID;'

En otras palabras, la cantidad de valores máximos corresponden al siguiente esquema (un espacio de barra esta dado como [espacio]):

Es decir, la regla 'grid' con sus valores de atajo se vería así:

grid: 100px 1fr / 1fr 2fr 1fr;

UNIDAD 'fr'

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:

Gráfico explicativo del eje principal y eje secundario según los criterios de la propiedad CSS Grid. duduromeroa.com

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:

1
2
3
4
5
6

Otro ejemplo con valores grid en pixeles y justificado en centro:

1
2
3
4
5
6

ESTUDIO DE SUBPROPIEDADES DE GRID

Subpropiedad 'grid-template-rows'

Da la altura del contenedor. Es el primer valor en el atajo 'grid:...;'

1
2
3
4
5
6

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.

1
2
3
4
5
6

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:

1
2
3
4
5
6



SUBPROPIEDAD grid-template-columns

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:

1
2
3
4

También se pueden combinar valores en pixeles y %:

1
2
3
4

Subpropiedad grid-template-areas y propiedad de item 'grid:...;'

Nombra áreas dentro de un contenedor grid. Gracias a cada nombre de área se le puede otorgar propiedades.

1
2
3
4
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium...

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:

1
2
3
4
5
6

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í:

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:

Cabezote
Menu
Central
Derecha
Abajo

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:


Subpropiedad grid-auto-rows

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
AA
BB
CC
DD
EE
Sin altura explícita, pero entra en fila explícita
Sin altura explícita
Sin altura explícita
Sin altura explícita


Subpropiedad grid-auto-columns

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.

1
2
3
4
5
6

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.

1
2
30%
4
5
30%
50%
50%
30%

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.

1
2
30%
4
5
30%
50%
50%
30%

Subpropiedad grid-auto-flow

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:

AA
BB
CC
DD
EE
Nuevo item 1
Nuevo item 2
Nuevo item 3

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.

AA
BB
CC
DD
EE
Nuevo item 1
Nuevo item 2
Nuevo item 3

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':

AA
BB
CC
DD
EE
Nuevo item 1
Nuevo item 2
Nuevo item 3