Com orepeat() eauto-fit / auto-fill funções é fácil obter itens de grade para quebrarquando houver um padrão de comprimento definido para as colunas ou linhas.

No exemplo abaixo, todas as colunas têm largura mínima de 100px e largura máxima de 1fr.

Demonstração do jsFiddle

#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>

Mas quando as faixas não têm um padrão de comprimento (ou seja, os comprimentos variam aleatoriamente), como os itens de grade podem ser feitos para quebrar?

No exemplo abaixo, a primeira coluna tem 60% de largura. A segunda coluna é min / max 250px / 1fr. Como faço para que a segunda coluna seja quebrada em telas menores?

Demonstração do jsFiddle

#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>

Eu sei que as consultas flexbox e de mídia fornecem soluções, mas estou me perguntando se o Grid Layout pode fazer isso. Eu procurei noespecificação mas não encontrou nada. Talvez eu tenha perdido a seção. Obrigado pela ajuda.