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