Flexbox заставил меня мыслить вне традиционных концепций CSS. Теперь Grid заставляет меня мыслить вне гибких концепций. Поведение гибкой упаковки было (ошибочным) соображением, стоящим за моим вопросом. Спасибо за разъяснения.

также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 или псевдокласс. Функция автозаполнения может изменять количество элементов, но ширина столбцов и высота строки будут занимать самые широкие элементы, которые в нем содержатся. видеть :

 G-Cyr02 нояб. 2017 г., 20:43
w3.org/TR/css-grid-1/#auto-repeat автоподгонка может быть то, что вы ищетеБлагодарю. Я знаком с этой концепцией макета и разделом в спецификации (
 G-Cyr02 нояб. 2017 г., 21:01
Элементы сетки на самом деле не оборачиваются. Причина, по которой вы видите, что элементы сетки «переносятся» в следующую строку, на самом деле заключается в том, что явная сетка изменяется, чтобы соответствовать ограничениям, предусмотренным
 G-Cyr02 нояб. 2017 г., 20:58
да, сетка (версия отображения таблицы 2.0) очень похожа на отображение таблицы с диапазоном столбца и строки, который отсутствовал с самого начала. Flex, безусловно, самая .... гибкая сеточная система на данный момент
 Michael_B02 нояб. 2017 г., 20:51
Я писал об этом раньше). Мне было интересно, есть ли в Grid другой метод для обертывания дорожек, либо с помощью метода, который я еще не обнаружил, либо путем создания, скажем, сетки из 12 столбцов, а затем с помощью размещения на основе линий, чтобы элементы охватывали столбцы и в конце концов заверните. @ G-CyrУпс, нет, к сожалению, насколько я знаю, это не так, вы можете закончить тем, что дети, к сожалению, перекрывают друг друга :( Ваш вопрос и ожидания кажутся очень похожими на поведение встроенных элементов 101 ... если оно содержит встроенное содержимое. действительно хорошая и умная функция.

Ответы на вопрос(1)

Решение Вопроса

minmax() пропорциональна используемой ширине контейнера сетки, и элементы сетки располагаются один за другим в соответствии с количеством столбцов, при этом новые строки создаются по мере необходимости.repeat()Таким образом, невозможно принудительно обернуть второй элемент сетки, когда есть два столбца и в явной сетке есть место для вставки этого элемента сетки во второй столбец. Кроме того, даже если вы

мог скажите второму элементу сетки "обернуть", это будет означать размещение его в новой строкев первом столбцепоэтому его расположение будет регулироваться первым столбцом, а не вторым. Если его размер будет соответствовать второму столбцу, это, конечно, полностью нарушит компоновку сетки.Если целью является размещение небольших экранов путем переноса элементов на новые линии, следует использовать гибкий макет, а не сетку. Раскладка сетки не подходит для этой цели.

Flexbox заставил меня мыслить вне традиционных концепций CSS. Теперь Grid заставляет меня мыслить вне гибких концепций. Поведение гибкой упаковки было (ошибочным) соображением, стоящим за моим вопросом. Спасибо за разъяснения.

 Michael_B19 янв. 2018 г., 18:41
Как получить элементы сетки разной длины для упак

Ваш ответ на вопрос