Te enseño la propiedad css grid y una nueva herramienta kuworking para una exploración más visual

1. Prólogo
2. Display: grid
3. grid-template-columns
4. minmax
5. Hace falta especificar todos los elementos?
6. Inter-espacios
7. Habilitar celdas que ocupen más que su espacio
8. Alineando los elementos del grid

Prólogo

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

Para decidir cuando utilizar grid y cuando flex, grid nos permite controlar la distribución en 2D y prioriza esa distribución por encima del contenido, mientras que flex nos organiza en 1D y prioriza el contenido y su adaptación por encima de la distribución

En esta entrada explico las opciones de grid y te presento una nueva herramienta kuworking para verlo de una forma más directa y visual, el GRID EXAMPLES

Display: grid

Utilizar grid es tan fácil como ponerlo en la definición de display de tu elemento (fíjate que en css no puedes ahorrarte el punto-y-coma del final)

display: grid;

Con esto 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

display: 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 el use-case más habitual

display: grid;
grid-template-columns: 90px 50px 120px;
grid-template-columns: 1fr 2fr 1fr;
grid-template-columns: 90px 2fr 1fr;
grid-template-columns: 20% 1fr 2rem;
grid-template-columns: auto auto auto;
grid-template-columns: 1fr 1fr auto;

6 ejemplos para explicar la versatilidad que nos da grid para definir columnas:

1. Con valores absolutos de px, algo no muy recomendado por no adaptarse a las distintas resoluciones de las pantallas (siempre es mejor trabajar con unidades relativas como em o rem)
2. Con fr que se refiere a la fracción de espacio libre que tenemos, es decir, en este caso todo el espacio se dividirá por los 4 fr que estamos utilizando (podríamos haber puesto 1fr 2fr 10fr y el espacio se dividiría por 13 fr entonces)
3. Mezclando, donde fr por lo tanto se calculará como todo el espacio menos los 90 px
4. Con tantos por ciento, o con rem, donde fr se calcula como el espacio restante una vez le hemos quitado lo anterior
5. Con auto que quiere decir lo que haga falta en función del contenido del hijo, ojo porque esto no asegura que todas las columnas tengan el mismo ancho
6. Mezclando fr y auto, en este caso nos aseguramos que la primera y segunda columna tengan el mismo ancho

minmax

Con minmax en lugar de definir un número podemos definir un mínimo y un máximo, utilizado sobre todo para asegurarnos que haya una flexibilidad (en función del contenido) pero sin llegar a tener valores inadecuados para los dos extremos

Por ejemplo, si queremos una tabla con filas de una longitud mínima determinada pero una longitud máxima sin especificar (así, si la fila está vacía continuará teniendo un valor decente de longitud)

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

Hace falta especificar todos los elementos?

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

Y si el número de elementos va subiendo, tengo que ir añadiendo celdas en el grid de modo manual?

No, pero los valores no serán los que has definido, la manera de definirlos es con grid-auto-rows o grid-auto-columns

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

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

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 definiríamos con repeat las primeras 5 filas, luego una sexta con 400 px para poner algún anuncio o CTA, y a partir de allí todas tendrían el aspecto de minmax(50px, auto)) al haberlo definido con grid-auto-rows

Inter-espacios

Si queremos también podemos especificar espacios entre filas y columnas

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

Donde la última expresión es el shortcut equivalente de las dos primeras

Fíjate en la elección de px para filas y rem para columnas, esto responde a un habitual en diseño web que es que las filas no tengan un height definido sino que se alargan cuanto haga falta (porque el usuario ya cuenta con el scroll vertical), mientras que en las columnas se tiende a evitar el scroll horizontal (hay pocas excepciones a esta regla)

Por lo tanto, establecer un gap que por definición es responsive (porcentajes, equivalentes o valores rem o em) tiene todo el sentido del mundo

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, de utilidad si queremos por ejemplo destacar alguna entrada con un tamaño mayor que las otras

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 posts aunque en el html esté al final de la lista

.item {
  grid-row: 2;
  grid-column: 4;
  grid-area: 2 / 4;
}

En este caso ese ítem se sitúa en la fila 2 y columna 4, o lo podemos decir en una línea con grid-area

A diferencia de antes, esta especificación css tiene que ir en el ítem y no en el container

Además, del mismo modo también podremos expandir la celda

grid-row: 2 / 3;
grid-column: 4 / 5;
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;
grid-area: 2 / 4 / 3 / 6;

Y ya lo tendríamos

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

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

Recuerda que el grid-area es una alternativa a utilizar grid-row y grid-column

Depende de cómo lo establezcamos tendremos elementos que se solaparán, con lo que podemos utilizar z-index: 1; para establecer qué debe estar por encima

Alineando los elementos del grid

Y finalmente, para ajustar la organización del grid tenemos las expresiones (en el container)

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

Y podemos definir exactamente lo mismo pero a nivel de item con las 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;

Y 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

La mayoría de veces es más sencillo verlo que leerlo, así que aquí tienes un ejemplo visual en la herramienta de kuworking que presento en esta entrada: GRID EXAMPLES aquí