w3.unpo<code>todo

En el HTML tenemos un div id="cuadricula", dentro del cual aparecen anidados 5 otros div class="ítem".

<div id="cuadricula">
	<div class="item" style="--color:#3E989B;"><p>1</p></div>
	<div class="item" style="--color:#6DB465;"><p>2</p></div>
	<div class="item" style="--color:#F2C14E;"><p>3</p></div>
	<div class="item" style="--color:#F78154;"><p>4</p></div>
	<div class="item" style="--color:#C87694;"><p>5</p></div>
</div>

En el CSS lo más importante son estas líneas de código:

#cuadricula {
    /*transforma la #cuadricula en un contenedor grid:*/
    display: grid;
    /*esto genera 3 columnas iguales cuya anchura es 1fr */
    grid-template-columns:1fr 1fr 1fr;
    /*establece el espaciado entre los ítems del grid*/
    grid-gap:1em;
}

La primera línea de código transforma la #cuadricula en un contenedor grid:

display: grid;

La segunda línea de código crea la estructura de columnas:

grid-template-columns:1fr 1fr 1fr;

La propiedad grid-template-columns ( template == plantilla ) establece:
- que la #cuadricula tiene tres columnas.
- que la anchura de cada columna dentro del contenedor grid es de una fracción de grid ( 1fr ), o sea, en este caso, la tercera parte del ancho de la #cuadricula.

En la tercera línea de código, la propiedad grid-gap establece el tamaño del espacio que tiene que haber entre columnas, en este caso una distancia de 1em:

grid-gap:1em;

See the Pen Grid #1: un ejemplo muy fácil by Gabi (@enxaneta) on CodePen.

Menos importantes son las reglas que establecen el color de fondo de los ítems.

background-color: #3E989B;
background-color: var(--color);

La primera regla establece el color de fondo de cada ítem como azul #3E989B. Este será el color de los ítems en navegadores que no soportan variables.
La segunda regla utiliza una variable CSS para el color de fondo.

Lea más acerca de variables CSS.

En el ejemplo anterior hemos visto la propiedad grid-template-columns en acción. También hay otra propiedad: grid-template-rows ( rows == filas ) utilizada para crear la estructura de filas del contenedor grid.

#cuadricula {
    display: grid;
    grid-template-columns:1fr 1fr 1fr;
    grid-template-rows:6em max-content;
    grid-gap:1em;
  }

En este caso 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 ):

See the Pen GRID: grid-template-columns & grid-template-rows by Gabi (@enxaneta) on CodePen.

Lea más acerca de max-content y min-content en el grid layout

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.

Un área del contenedor grid es un espacio definido entre cuatro líneas: dos líneas verticales y dos horizontales. Dentro de esta área pueden haber, o no, uno o más ítems grid.
Para poder referenciar estas áreas necesitamos definirlas utilizando la propiedad grid-template-areas.

.grid {
    /* transforma el elemento en un contenedor grid*/
    display: grid;
    /*define las columnas y las filas del contenedor grid*/
    grid-template-columns:1fr 10em 10em 1fr;
    grid-template-rows:5em 10em 5em;
    /*define las áreas del grid*/
    grid-template-areas:"h  h  h   h"
                        "l  .  c   r"
                        "l  f  f   f";
  }

Miremos con atención la ultima regla CSS: el valor de grid-template-areas es una sucesión de tres cadenas de texto, una para cada fila definida con grid-template-rows. Dentro de cada cadena de texto aparecen exactamente 4 valores: uno para cada columna definida con grid-template-columns.  Los nombres utilizados en este caso son h, l, ., c, r y f, pero podemos utilizar los nombres que deseamos, incluso nombres con diacríticos.

Ulteriormente podemos utilizar estos nombres para definir la posición y la extensión de los ítems grid utilizando la propiedad grid-area:

  .h{grid-area: h;}
  .l{grid-area: l;}
  .c{grid-area: c;}
  .r{grid-area: r;}
  .f{grid-area: f;} 

Si no utilizamos una de las áreas definidas, esta se queda vacía. En este caso el nombre del área vacia es un punto.

See the Pen Grid grid-template-areas by Gabi (@enxaneta) on CodePen.

La propiedad grid-gap define el espacio que tiene que haber entre las columnas y las filas del contenedor grid, y es un método abreviado para grid-row-gap ( espaciado de fila ) y grid-column-gap ( espaciado de columna ).

Por ejemplo esta regla;

.grid{grid-gap:1em;}

Establece que la distancia entre las celdas del contenedor grid es de 1em. O sea: la distancia entre las columnas es igual a la distancia entre las filas del contenedor.

Esta otra regla:

.grid{grid-gap:1em .5em;}

establece que la distancia entre las filas del grid es de 1em mientras que la distancia entre las columnas es de .5em.
Los locuaces pueden escribir lo mismo utilizando dos reglas CSS:

.grid{
  grid-row-gap:1em;
  grid-column-gap: .5em;
  }

See the Pen GRID-gap by Gabi (@enxaneta) on CodePen.

Podemos reordenar los ítems del contenedor grid utilizando la propiedad grid-auto-flow.

La propiedad grid-auto-flow puede tomar una de estas valores:

.contenedor{
    grid-auto-flow: row | column | row dense | column dense
  }

El valor por defecto de grid-auto-flow es row, lo que quiere decir que los elementos se disponen automáticamente en filas.

Si grid-auto-flow: column los elementos se disponen en columnas.

See the Pen GRID-auto-flow #1 by Gabi (@enxaneta) on CodePen.

Para entender lo que puede hacer la palabra clave dense, necesitamos hacer unos pequeños cambios al ejemplo anterior:

  .item:nth-child(3n){grid-row-end:span 2;}
  .item:nth-child(2n){grid-column-end:span 2;}

Esto hace que algunos ítems sean más anchos o más altos que los demás, y por lo tanto ya no encajan perfectamente y aparecen huecos en la estructura del grid. Y aquí la cosa se pone interesante.

Si añadimos la palabra clave dense:

.grid{
    grid-auto-flow: row dense;
}

el algoritmo auto-flow intenta calcular de nuevo la posición de cada ítem por tal de hacerlos encajar.

See the Pen GRID-auto-flow DENSE by Gabi (@enxaneta) on CodePen.

Supongamos que dentro de un contenedor grid con dos columnas y dos filas hay 8 elementos. En este caso el grid crea otra fila y otra columna para acomodar los cuatro elementos sobrantes. La altura y respectivamente la anchura de estos carriles (implicit tracks) es 0, pero podemos utilizar las propiedades grid-auto-columns y grid-auto-rows para especificar otros valores.

See the Pen GRID-auto-columns & grid-auto-rows by Gabi (@enxaneta) on CodePen.

Utilizamos las propiedades justify-items y align-items para alinear horizontalmente ( justify-items ) y verticalmente ( align-items ) los ítems dentro de las celdas o de las áreas del contenedor grid.
Estos atributos pueden tomar uno de estos valores:

.contenedor{ 
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}

En idiomas como el castellano, con un sistema de escritura de izquierda a derecha direction: ltr; ( left to right ),
justify-items: start alinea los ítems a la izquierda,
justify-items: end alinea los ítems a la derecha.

La otra propiedad
align-items: start alinea los ítems a la parte superior de la celda o área
align-items: end alinea los ítems a la parte inferior de la celda o área.

Si utilizamos estas palabras clave:
center: el ítem aparece en el centro ( center ) de la celda o área,
stretch: el ítem aparece estirado ( stretched ) para ocupar toda la celda o área.

Alineación de los ítems dentro de las celdas del grid:

See the Pen Grid justify-items & align-items #1 by Gabi (@enxaneta) on CodePen.

Alineación de los ítems dentro de las áreas del grid:

See the Pen Grid justify-items & align-items inside grid areas by Gabi (@enxaneta) on CodePen.

Hay situaciones en los cuales el contenedor es más grande que el grid. Esto puede pasar si dimensionamos el grid relativo a la ventana, pero las columnas y las filas tienen dimensiones fijas (en px o en em). En estos casos podemos alinear las columnas y las filas del grid relativo al contenedor utilizando las propiedades justify-content y align-content.
Los valores que pueden tomar estas dos propiedades son:

.contenedor{
   justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
   align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

start ( el valor por defecto ): los elementos aparecen agrupados al principio ( start ) del eje horizontal ( para justify-content ) o vertical ( para align-content ).

end: los elementos aparecen agrupados al final ( end ) del eje horizontal ( para justify-content ) o vertical ( align-content ).

center: los elementos aparecen agrupados al centro ( center ).

stretch: los elementos aparecen estirados ( stretched ) para ocupar el espacio restante.

space-around: los elementos aparecen distribuidos uniformemente, y con un espacio igual entre ellos. ( medio espacio entre los bordes del contenedor y los ítems ).

space-between: los elementos aparecen distribuidos uniformemente: al principio, en el centro y al final del eje ( sin espacio entre los bordes del contenedor y los ítems ).

space-evenly: los elementos aparecen distribuidos uniformemente, y con un espacio igual entre ellos y entre ellos y los bordes del contenedor.

Si esto no parece muy claro, pruebe esta demostración:

See the Pen GRID justify-content & align-content by Gabi (@enxaneta) on CodePen.