duduromeroa.com

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

SE RECOMIENDA revisar siempre la disponibilidad de las propiedades flex-box en navegadores con 'CAN I USE'
SE RECOMIENDA revisar los ejemplos dados aquí desde la ventana 'inspector' del navegador o desde el código fuente de esta página (click derecho -> 'page source') para revisar los comentarios en el código. Para entender mejor cómo es el comportamiento de los elementos juega con ensanchar o apretar las dimensiones de la ventana del navegador.
Fuentes: Ben Frain (2022). Responsive Web Design with HTML5 and CSS- 4ta edición; Chat transformador preentrenado generativo ('Generative Pre-trained Transformer, GPT) y ejercicios propios.
Última modificación: marzo 23 del 2023, 11h59

Ir a estudio de propiedad CSS Flex

DIFERENCIAS ENTRE CSS FLEX BOX y GRID

Flex-box maqueta áreas con una sola dimensión (o solo en fila (row) o solo en columna).
Grid maqueta áreas con una o ambas dimensiones.
Cada opción dependerá de la necesidad del diseñador.
lista

SINTAXIS DE CSS GRID. COMUNICA AL NAVEGADOR:

Cantidad de filas y columnas
Cuáles deben ser dimensionadas
Las acciones de dimensionar cuando el browser cambia de tamaño

TERMINOLOGÍA

Grid explícito: se define en CSS con unidades de tamaño para columnas y filas. Es el layout.
Grid implícito: cuando a ciertos elementos no se le ha dado unidades de tamaño.

PROPIEDAD 'DISPLAY: GRID;'

Activa un elemento contenedor con las propiedades CSS grid de multidimensión de áreas.
'grid' agrupa atajos desde una sola regla o declaración CSS para los siguientes 6 subpropiedades:

grid-template-rows
grid-template-columns
grid-template-areas
grid-auto-rows
grid-auto-columns
grid-auto-flow

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;

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

grid-template-rows: da la dimensión (alto) de cada fila en el grid mediante unidades px, %, o unidad 'fr'.
grid-template-columns: da la dimensión de cada columna en el grid.
grid-template-areas: permite nombrar cada área grid.
grid-auto-rows: Da la dimensión por default de cada fila creada en el grid.
grid-auto-columns: da la dimensión por default de las columnas creadas en el grid.
grid-auto-flow: Dirección en el que los elementos grid son colocados automáticamente en el 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:

ESTUDIO DE SUBPROPIEDADES DE GRID

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:

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:

{ display: grid;
grid-template-columns: auto auto; }

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

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.

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.

{ grid-template-areas:
'cosa cosa . . .'
'cosa cosa . . .'; }

En otras palabras, se pide eso:

[cosa][cosa] [celdaPunto] [celdaPunto] [celdaPunto]
[cosa][cosa] [celdaPunto] [celdaPunto] [celdaPunto]

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:

Cabezote

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:

{ grid-template-areas:
cabz AreaCabezote AreaCabezote AreaCabezote uno uno
menu menuCentrado menuCentrado titu titu titu
areaAbajo areaAbajo menu1 menu1 menu1 menu1; }

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.

VALORES
'grid-auto-rows: auto;' ...define la altura de los elementos de esa fila según su contenido.
'grid-auto-rows: [valorEntero]px;' ...define la altura de los elementos de esa fila según la unidad usada (px, %, vh, vw).
En el ejemplo de abajo, los cuatro últimos elementos no están explícitos (es decir, no estan definidos en la propiedad 'grid-template-rows:...;' del contenedor grid. Pero, ya que el primer elemento SÍ entra en la segunda fila explícita (DD, EE...); los tres últimos elementos serán afectados por la propiedad 'grid-auto-rows:..;' teniendo esta fila la menor altura que las otras dos.

Sin altura explícita, pero entra en fila 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.

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.

30%

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.

30%

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];

row; ... valor default. Los elementos del contenedor 'display: grid;' se colocan fila a fila de arriba hacia abajo y de izquierda a derecha.
column; ... los elementos grid se colocan columna a columna, de arriba hacia abajo y de izquierda a derecha.
dense; ... compensa los espacios vacíos en las grillas.

Recordar:

Las reglas explícitas de CSS grid tendrán más reelevancia que las implícitas. Es decir, reglas como 'grid-row' o 'grid-column' no serán afectadas por los valores en 'grid-auto-flow'.

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:

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.

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

Nuevo item 1

Nuevo item 2

Nuevo item 3