такжеrepeat() функции легко получить элементы сетки, чтобы обернутьauto-fit / auto-fillкогда есть определенный шаблон длины для столбцов или строкВ приведенном ниже примере все столбцы имеют минимальную ширину 100 пикселей и максимальную ширину 1 кадр..

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>

В приведенном ниже примере ширина первого столбца составляет 60%. Второй столбец min / max 250px / 1fr. Как получить второй столбец для переноса на меньшие экраны?

jsFiddle demo

Я знаю, что flexbox и медиа-запросы предоставляют решения, но мне интересно, может ли Grid Layout сделать это. Я искал

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

спекуляция но ничего не нашел. Может быть, я пропустил раздел. Спасибо за вашу помощь.Сетка строит сетку через столбцы и строки, что делает все строки и столбцы одинакового размера, как это делает таблица HTML. Как и таблица, элементы могут занимать несколько строк и / или столбцов, но это необходимо установить в CSS для каждого контейнера через класс / id или псевдокласс. Функция автозаполнения может изменять количество элементов, но ширина столбцов и высота строки будут занимать самые широкие элементы, которые в нем содержатся. видеть :