Implicit grid

Es un sistema de diseño en el que la cuadrícula se expande automáticamente para alojar elementos que no caben en la cuadrícula explícita definida.

Las filas o columnas que no están declaradas en la cuadrícula explícita se generan de forma automática.
Podemos usar grid-auto-rows o grid-auto-columns para definir el tamaño de las filas/columnas implícitas que se vayan creando.
Ideal cuando el número de elementos es dinámico o desconocido de antemano.

Ejemplo

En este ejemplo dinámico, podemos ver cómo sería la creación de una fila implícita, la cual coge el alto de grid-auto-rows y la creación de una columna implícita donde su ancho corresponde con la propiedad grid-auto-columns.

Selecciona grid-auto:

grid-auto-rowsgrid-auto-columns

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: 5rem;
  grid-template-columns: 20% 1fr 2fr;
  grid-template-rows: 4rem;
  padding: 0.5rem;
}

.child {
  padding: 1rem;
}

.container {
  border: 1px solid #2b7de0;
  display: grid;
  gap: 1rem;
  grid-auto-rows: 5rem;
  grid-template-columns: 20% 1fr 2fr;
  grid-template-rows: 4rem;
  padding: 0.5rem;
}

.child {
  padding: 1rem;
}

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