Columnas con repeat y separación con gap

Vimos cómo se comporta la lista con dos o cuatro tarjetas por fila. Como quitamos el margen de cada tercera tarjeta, la tercera y la cuarta quedaron pegadas. Además, volvió a aparecer un espacio sobrante junto al borde derecho del contenedor.

Café: el largo viaje del cafeto a tu taza

Las mejores cafeteras para casa

Consejos de barista: ¿qué café elegir?

Recetas para Año Nuevo

No sabemos qué ancho tendrá la ventana de cada persona ni qué tarjeta quedará al final de una fila. Por eso no podemos usar :nth-child para quitarle el margen derecho. ¿Qué podemos hacer?

Una opción es usar la propiedad gap en flexbox. Así no importa cuál sea la última tarjeta de la fila.

Pero hay otra forma de distribuir las tarjetas: usar grid. En ese caso también podremos establecer la cantidad de columnas.

Escribiremos nuevos estilos para la lista de tarjetas, esta vez con grid y gap.

.grid-container {
  display: grid;
  gap: 10px;
}

Como al definir las columnas del contenedor grid indicamos su ancho, ya no hace falta dar un ancho a las propias tarjetas.

Todas las columnas de la lista deben tener el mismo ancho. Para ello podemos usar la función repeat, cuyo nombre significa «repetir». Entre paréntesis se escriben la cantidad de columnas y su ancho, separados por una coma:

grid-template-columns: repeat(cantidad de columnas, ancho de la columna);

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 100px);
}

Eliminaremos todo el código de la distribución con flexbox. Después convertiremos la lista de tarjetas en un contenedor grid y separaremos las tarjetas con gap. Usaremos repeat para dividir la lista en columnas y probaremos distintos valores.