Grid (vs Flex)

Utilizar el grid de css puede parecer complicado ya que aparentemente hay muchas variantes y resulta poco intuitivo

No lo mejora la alternativa (complementaria) display:flex ya que és o parece igualmente compleja y además confunde al poder utilizar ambos métodos para más o menos lo mismo

La diferencia entre grid y flex es conceptual, y aunque puedes ejecutar diseños iguales con ambas tecnologías, una recomendación interesante sería ésta:

• Utilizar grid cuando queramos organizar distribuciones en 2 dimensiones, y flex cuando queramos organizar distribuciones en 1 dimensión

• Y/o utilizar grid cuando queramos priorizar la distribución por encima del contenido, y flex cuando queramos priorizar el contenido por encima de la distribución

Voy a repasar las propiedades básicas de grid, lo mejor es verlo también de forma visual, y tienes distribuciones de ejemplo aquí en distribuciones grid

display: grid;

Utilizar grid es tan fácil como ponerlo en la definición de display de tu elemento

display: grid;
display: inline-grid;

Con grid tienes una disposición en filas donde los elementos de dentro se expanden para ocupar todo el ancho del padre

Si quieres que el ancho se ajuste al contenido, utiliza inline-grid

grid-template-columns

El gran qué de grid es especificarle cuantas columnas (o filas) queremos, aquí lo explico en columnas ya que es la utilización más habitual

display: grid;

/* con valores absolutos de px, aunque es más recomendable trabajar en unidades relativas */
grid-template-columns: 90px 50px 120px;

/* con valores relativos de `fr` que se refiere a la fracción de espacio libre que tenemos (aquí el espacio total será de 1+2+1 = 4fr) */
grid-template-columns: 1fr 2fr 1fr;

/* mezclando valores absolutos con relativos, el relativo se calcula restando el absoluto del total */
grid-template-columns: 90px 2fr 1fr;

/* valores en relativo, también con porcentajes o con rem */
grid-template-columns: 20% 1fr 2rem;

/* otro ejemplo de valores relativos, aquí con auto definirá el ancho en función del contenido */
grid-template-columns: auto auto auto;

/* Y también podemos mezclar auto (relativo al contenido) con valores relativos (relativos al espacio) */
grid-template-columns: 1fr 1fr auto;

minmax

Con minmax en lugar de definir un número como hemos hecho antes, podemos definir un mínimo y un máximo

Esto da un plus de versatilidad muy grande

Por ejemplo, si queremos una tabla con filas de una longitud mínima de 50px pero una longitud máxima sin especificar y en relación al contenido

display: grid;
grid-template-rows: minmax(50px, auto);
grid-template-columns: 1fr auto 1fr;

repeat

Si tenemos 20 elementos y los queremos organizar en 4 columnas, no es necesario especificar las 5 filas que se ocuparán

La manera de definirlos es con grid-auto-rows o grid-auto-columns

Y si quieres ahorrar carácteres, tenemos a mano el repeat

display: grid;
grid-template-rows: repeat(5, minmax(50px, auto)) 400px;
grid-auto-rows: minmax(50px, auto));
grid-template-columns: 1fr auto 1fr;

En este ejemplo definimos con repeat las primeras 5 filas, luego una sexta con 400 px, y a partir de allí todas tendrían el aspecto de minmax(50px, auto)) al haberlo definido con grid-auto-rows

grid-gap

Con grid y a diferencia de flex definir los espacios entre columnas y filas es muy fácil

grid-row-gap: 10px;
grid-column-gap: 1rem;

/* o las dos a la vez */
grid-gap: 10px 1rem;

Como detalle, fíjate que en columnas defino el espacio en px, ya que se asume que el usuario siempre tendrá scroll vertical, mientras que para las columnas lo defino en unidades relativas, porque se asume que el usuario nunca tendrá scroll horizontal (algo que normalmente quieres evitar)

grid-area o habilitar celdas que ocupen más que su espacio

grid nos permite definir celdas que ocupen el equivalente a dos celdas contiguas (o más) tanto en horizontal como en vertical

También nos permite colocar celdas en el órden en que queramos, lo que nos permite por ejemplo poder posicionar un CTA en una posición específica de nuestro grid de entradas aunque en el html esté al final de la lista

.item {
  grid-row: 2;
  grid-column: 4;

  /* o en una línea */
  grid-area: 2 / 4;
}

En este caso ese ítem se sitúa en la fila 2 y columna 4

También podemos expandir la celda

grid-row: 2 / 3;
grid-column: 4 / 5;

/* en una línea */
grid-area: 2 / 4 / 3 / 5;

En este caso la celda se coloca en la fila 2, columna 3 y no se expande ya que termina en la fila y columna siguiente, es decir que lo que acabo de escribir es idéntico a lo anterior

Por el contrario, si quiero expandir la celda 2 columnas:

grid-row: 2;
grid-column: 4 / 6;

/* equivalente */
grid-area: 2 / 4 / 3 / 6;

Sin embargo, para mi es más intuitivo utilizar la palabra clave span para decir cuantas posiciones se tiene que expandir la celda

grid-row: 2;
grid-column: 4 / span 2;

/* en una línea */
grid-area: 2 / 4 / span 1 / span 2;

Y en cualquier caso, estas especificaciónes tienen que ir siempre en el ítem y no en el container

Alineando los elementos del grid

Para ajustar la organización del grid tenemos las expresiones

justify-items: auto | normal | start | end | center | stretch | baseline | first baseline | last baseline;
align-items: auto | normal | start | end | center | stretch | baseline | first baseline | last baseline;

Tenemos que elegir una de estas opciones, donde para justify-items especificamos la horizontal y para align-items especificamos la vertical

Si queremos ajustar todo el grid en relación al container en sí, tenemos el contents

justify-contents: normal | start | end | center | stretch | space-around | space-between | space-evenly | baseline | first baseline | last baseline
align-contents: normal | start | end | center | stretch | space-around | space-between | space-evenly | baseline | first baseline | last baseline

La diferencia entre contents e items es que el primero organiza en base al espacio de toda la grid, mientras que el segundo se refiere a los items en particular

Pero también podemos definir exactamente lo mismo pero a nivel de item en lugar de los containers con las siguientes expresiones:

justify-self: auto | normal | start | end | center | stretch | baseline | first baseline | last baseline;
align-self: auto | normal | start | end | center | stretch | baseline | first baseline | last baseline;

La mayoría de veces es más sencillo verlo que leerlo, y para eso aquí tienes ejemplos