使用repeat()和auto-fit/ auto-fill函数， 当为列或行定义了长度模式时， 很容易获得要包装的网格项目。

在下面的示例中，所有列的最小宽度均为100px，最大宽度为1fr。

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

但是，当轨道没有长度模式（即，长度随机变化）时，如何使网格项目包装？

在下面的示例中，第一列的宽度为60％。第二列是最小/最大250px / 1fr。我如何才能将第二列包装在较小的屏幕上？

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

我知道flexbox和媒体查询可以提供解决方案，但是我想知道Grid Layout是否可以做到这一点。我搜索了
规格，但没有找到任何东西。也许我错过了本节。谢谢你的帮助。