Algunas palabras clave
Una fracción de grid
Aunque podemos utilizar cualquier otras unidades para longitud disponibles en CSS ( px, %, em, rem
. . .etc ), es importante saber que el grid tiene una unidad especifica: fr
que representa una fracción del espacio disponible dentro del contenedor grid.
Veamos un caso muy sencillo. Si queremos crear una estructura de 3 columnas , podemos escribir:
grid-template-columns:1fr 1fr 1fr;
En este caso cada una de las tres columnas tiene una anchura de 33.33%.
Si queremos que la columna central sea mas ancha podemos escribir:
grid-template-columns:1fr 2fr 1fr;
Esta vez dividimos el espacio disponible por 4 ( 1fr + 2fr + 1fr == 4fr ), y en este caso la primera y la tercera columna tendrán una anchura de 25%, mientras que la columna central tendrá una anchura de 50%.
No es absolutamente necesario utilizar números íntegros. También podemos usar números decimales. Por ejemplo esta es una declaración perfectamente válida, i el resultado es idéntico al de antes:
grid-template-columns:0.5fr 1fr 0.5fr;
Tampoco es necesario utilizar exclusivamente fracciones de grid ( fr
). Podemos utilizar cualquier combinación de unidades de longitud, según sea necesario.
En este caso:
grid-template-columns:1fr 100px 10em;
la primera columna ocupa todo el espacio disponible dentro del contenedor grid, y es equivalente a:
grid-template-columns:calc(100% - 100px - 10em) 100px 10em;
En este caso, también podemos utilizar la palabra clave auto
con el mismo efecto:
grid-template-columns:auto 100px 10em;
El método repeat()
Para no repetirnos tanto ( grid-template-rows:1fr 1fr 1fr;
) podemos utilizar el método repeat()
:
grid-template-columns: repeat(3, 1fr);
donde el primer argumento ( 3
) especifica cuantas veces tiene que repetirse la sucesión especificada por el segundo argumento ( 1fr
).
#cuadricula {
display: grid;
/*grid-template-columns:1fr 1fr 1fr;*/
grid-template-columns: repeat(3, 1fr);
grid-gap:1em;
}
También podemos repetir una sucesión de columnas:
grid-template-columns: repeat(3, 1fr .5fr);
y esto es equivalente a:
grid-template-columns: 1fr .5fr 1fr .5fr 1fr .5fr;
O podemos utilizar una combinación, por ejemplo algo así:
grid-template-columns: repeat(3, 1fr .5fr) 1fr;
que es equivalente a:
grid-template-columns: 1fr .5fr 1fr .5fr 1fr .5fr 1fr;
Las palabras clave max-content y min-content
Si utilizamos max-content
para definir una columna o una fila, esto quiere decir que esta tendrá el tamaño ( anchura para columnas o altura para filas ) mínimo necesario para encajar el contenido máximo.
Si utilizamos min-conten
t, esto quiere decir el carril ( fila o columna ) tendrá el tamaño mínimo necesario para que no haya overflow.
See the Pen The min-content & max-content #1 (columns) by Gabi (@enxaneta) on CodePen.
En el siguiente ejemplo la propiedad grid-template-rows
crea una primera fila ( row ) que tiene una altura de 6em, y una segunda fila cuya altura depende del contenido de los ítems de esta ( max-content
).
Por de otra parte el contenido del div naranja es una lista cuyos elementos <li> pueden ser editados.
<li contenteditable="true">
En el CSS los elementos li tienen white-space: nowrap;
para prevenir los saltos de línea.
li{white-space: nowrap;}
Por favor edite los elementos de lista para ver min-content
in acción. Empiece por el elemento de lista más largo.
See the Pen GRID: min-content max-content by Gabi (@enxaneta) on CodePen.
Las palabras clave start y end
Dos de las palabras clave muy utilizadas: start
( inicio ) y end
( final ) pueden crear una cierta confusión. Es importante saber que en idiomas como el castellano, con un sistema de escritura de izquierda a derecha direction: ltr;
( left to right ), la palabra clave start
se refiere a la izquierda para columnas y arriba para filas. De la misma manera la palabra clave end
se refiere a la derecha del contenedor grid para columnas y abajo para filas.
See the Pen Grid keywords end, start & text direction by Gabi (@enxaneta) on CodePen.
Líneas y carriles
Cuando definimos las columnas y las filas ( tracks o carriles ) de un contenedor grid, automáticamente definimos las líneas ( lines ) de este.
See the Pen Grid: Important Terminology ( SVG) by Gabi (@enxaneta) on CodePen.
En idiomas como el castellano, con un sistema de escritura de izquierda a derecha ( direction: ltr;
) , la primera línea vertical coincide con el borde izquierdo del contenedor grid, y la podemos referenciar utilizando el número 1. De la misma manera la primera línea horizontal coincide con el borde superior del contenedor grid, y de nuevo la podemos referenciar utilizando el número 1.
Si no nos gusta utilizar números, o, si por alguna razón consideramos que pueden crear confusión, podemos dar nombres a las líneas utilizando esta sintaxis:
grid-template-columns: [col-1-a] 1fr [col-1-z col-2-a] 1fr [col-2-z col-3-a] 1fr [col-3-z];
En este ejemplo la primera línea se llama col-1-a
, pero la podemos referenciar también utilizando el número 1. La segunda línea tiene dos nombres: col-1-z
y col-2-a
que aparecen en el código separados por un espacio en blanco ( [col-1-z col-2-a]
). Exactamente como antes, también la podemos referenciar por el número de orden, 2 en este caso.
¿Y para que necesitamos todos estos nombres? Los necesitamos al definir la posición y extensión de los ítems grid, con las propiedades grid-area, grid-row-start
, grid-column-start
, grid-row-end
y/o grid-column-end
.