Funciones útiles

Funciones que facilitan la creación de cuadrículas dinámicas y responsivas.

repeat(n, value): evita escribir manualmente n veces el mismo valor.
minmax(min, max): define valores mínimo y máximo.
auto-fit: intenta ajustar las columnas al ancho del contenedor; si sobra espacio, colapsa huecos.
auto-fill: similar a auto-fit, pero deja huecos vacíos si no hay suficientes ítems.

Ejemplo

En este ejemplo, con grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)) creamos tantas columnas como quepan (auto-fit), cada columna tendrá al menos 70px y, si sobra espacio, se reparte proporcionalmente (1fr). Con grid-auto-rows: minmax(50px, auto), cada fila mide mínimo 50px de alto.

ResultadoEn vivoAncho del contenedor100%

html

<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
</div>

<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
</div>

css

.container {
  border: 1px solid #2b7de0;
  display: grid;
  gap: 1rem;
  grid-auto-rows: minmax(50px, auto);
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  padding: 0.5rem;
}

.child {
  padding: 1rem;
}

.container {
  border: 1px solid #2b7de0;
  display: grid;
  gap: 1rem;
  grid-auto-rows: minmax(50px, auto);
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  padding: 0.5rem;
}

.child {
  padding: 1rem;
}

Edita el código o usa los selectores: el resultado cambia al instante.