duduromeroa.com

Breve estudio de propiedades CSS GRID (Abr. 20-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;'

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

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

grid-template-columns con valor 'repeat(..,..)

El valor 'repeat(cantidadColumnas , ancho)' es un automatizado para generar columnas, ancho y espaciado. Por ejemplo, el valor 'repeat(5,1fr)' pide crear 5 columnas con un ancho de 1 fracción por cada columna.

1 explícita
2 explícita
3 explícita
4 explícita
6 Se agrega a columna explícita
7 Se agrega a columna explícita

Si se desean más columnas, se deberá ampliar a, por ejemplo, 'repeat(5,1fr)'. Sin embargo, ¿por qué los nuevos elementos no 'bajan' en forma de nueva columna? Esto es porque los nuevos elementos explícitos SÍ coiciden con la cantidad de columnas en grid-template-columns: repeat(11,1fr);. En otras palabras, una nueva columna número 12 sí se ubicaría debajo, como primera nueva columna.

1 explícita
2 explícita
3 explícita
4 explícita
5 explícita

En otro nuevo ejemplo, cada columna tendrá un ancho explícito; es decir, su ancho será dado desde la regla CSS: 'grid-template-columns: 30px 200px auto 100px;'

1
2 contenido
3 contenido
4

Así mismo, en otro nuevo ejemplo: otros valores de cálculo pueden ser añadidos en la regla 'grid-template-columns'. Por ejemplo, para indicar que se desea máximos o mínimos de ancho, como con 'minmax(valor, valor);'. En el ejemplo de abajo, el contenedor tiene: grid-template-columns: repeat(5, auto);. Eso significa que habrán solo 5 columnas con un ancho automático que se expandirá según el ancho del browser.

1 aquí contenido...
2 aquí contenido...
3 aquí contenido...
4 aquí contenido...

Pero si alteramos esa misma regla limitando el máximo y el mínimo del ancho, por ejemplo, mediante 'grid-template-columns: repeat(5, minmax(1rem, 7rem));'. Eso significa que las 5 columnas tendrán un ancho mínimo de 1rem y un ancho máximo de 7rem, sea cual sea la expansión o contracción horizontal del browser.

1 min 1rem, max 7rem
2 min 1rem, max 7rem
3 min 1rem, max 7rem
4 min 1rem, max 7rem
5 min 1rem, max 7rem

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

Dentro de un contenedor 'display: grid;' se organiza una grilla de elementos en 'grid-template-areas:...'. Luego, cada elemento HTML se le da un nombre de áreas mediante 'grid-area: nombre;' para que coincida con los elementos de la grilla. Ejemplo en CSS:

.contenedor{
display: grid;
grid-template-areas: "area1 area2";
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.elementoA{
grid-area: "area1;
}
 .elementoB{
grid-area: area2;
}

*** ATENCIÓN *** Si el contenedor 'display: grid;' tiene organizada la grilla pero cada elemento HTML no está nombrado mediante 'grid-area: nombreArea;' NADA FUNCIONARÁ.

*** ATENCIÓN *** 'grid-template-areas' NO APLICA con 'display: flex;. Solo aplica con 'display: grid;'

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 (en forma de diagrama):

1
2
3
4
5
6

En resumen, al momento de armar las áreas cada ubicación debe estar relacionada con el resto de elementos para armar módulos, como en un tablero de ajedrez. Preferible usar similar cantidad de letras en cada nombre de área y así 'ver' cómo se forma la grilla:

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. Ojo con las comillas en cada fila de regla:

*** OJO ATENCIÓN *** Si activas el 'display: grid;' en el contenedor, y si no llamas a cada elemento hijo con el 'grid-area: nombreArea;' NUNCA FUNCIONARÁ.

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:

Ante confusión, tomar en cuenta esto:

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

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