w3.unpo<code>todo

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;

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;

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-content, 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.

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.

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.