Con elrepeat() yauto-fit / auto-fill funciona, es fácil obtener elementos de cuadrícula para envolvercuando hay un patrón de longitud definido para las columnas o filas.

En el siguiente ejemplo, todas las columnas tienen un ancho mínimo de 100 px y un ancho máximo de 1fr.

jsFiddle demo

#grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-gap: 1em;
}

#grid > div {
  background-color: #ccddaa;
  padding: 10px;
}

<div id="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Pero cuando las pistas no tienen un patrón de longitud (es decir, las longitudes varían aleatoriamente), ¿cómo se pueden ajustar los elementos de la cuadrícula?

En el siguiente ejemplo, la primera columna tiene un ancho del 60%. La segunda columna es min / max 250px / 1fr. ¿Cómo puedo hacer que la segunda columna se ajuste en pantallas más pequeñas?

jsFiddle demo

#grid {
  display: grid;
  grid-template-columns: 60% minmax(250px, 1fr);
  grid-gap: 1em;
}

#grid > div {
  background-color: #ccddaa;
  padding: 10px;
}

<div id="grid">
  <div></div>
  <div></div>
</div>

Sé que flexbox y las consultas de medios proporcionan soluciones, pero me pregunto si Grid Layout puede hacer esto. Busqué elEspecificaciones Pero no encontré nada. Tal vez me perdí la sección. Gracias por tu ayuda.