Как я могу заставить эту сетку CSS переноситься на новую строку без указания размеров minmax?

Question

Я пришел из тяжелого div / float-фона, чтобы создавать адаптивные сайты (например, Bootstrap 3, Foundation) и кратко использовал Flex box, но пытался использовать Grid везде, так как он был действительно хорош в решении ряда проблем.Я, кажется, слишком часто сталкиваюсь с «простыми» проблемами, такими как эта, и чувствую, что мне не хватает некоторых основ, и я не могу найти ответ в документах.В любом случае, к коду.

При заданной настройке сетки примерно так:

display: grid;
grid-auto-columns: max-content;
grid-auto-flow: column;

содержимое не переносится на новую строку после заполнения ширины его родительского элемента.В идеале, я бы мог сделать это автоматически, без предварительного точного измерения пикселей, например grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));.Похоже, это не работает для моих нужд - мне нужно было бы определить несколько grid-template-columns измерений для разных областей просмотра и знать, какова хорошая ширина для элементов внутри столбцов.Я бы предпочел сказать grid-auto-columns: max-content;, а затем просто перенести элементы в новую строку.

Возможно ли это с сеткой?Что я упускаю / неправильно понимаю?

См. Codepen с полным примером, демонстрирующим проблему: https://codepen.io/csdv/pen/OrbrzJ

Answer 1

Я не понимаю, как это возможно с текущей итерацией CSS Grid .

Как вы уже обнаружили, вам, по крайней мере, нужно определить фиксированную минимальную ширинув столбцах для принудительного переноса в какой-то моментзапрещено в спецификации .

Вот как можно ближе к Grid, насколько я могу судить:

.btn-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(75px, max-content));
  width: 20rem;
}

/* original demo styles */
.btn {
  font-family: "Arial", sans-serif;
  border-bottom: 4px solid #77aaee;
  color: #77aaee;
  padding: .6rem;
  text-decoration: none;
}

<div class="btn-tabs">
  <a class="btn" href="#">Button 1</a>
  <a class="btn" href="#">Button 2</a>
  <a class="btn" href="#">Button 3</a>
  <a class="btn" href="#">Button 4</a>
  <a class="btn" href="#">Button 5</a>
  <a class="btn" href="#">Button 6</a>
</div>

Flexbox может быть хорошей альтернативой, так как он, кажется, работает с вашими требованиями:

.btn-tabs {
  display: flex;
  flex-wrap: wrap;
  width: 20rem;
}

/* original demo styles */
/* notice no width defined on flex items, but they wrap anyway */
.btn {
  font-family: "Arial", sans-serif;
  border-bottom: 4px solid #77aaee;
  color: #77aaee;
  padding: .6rem;
  text-decoration: none;
}

<div class="btn-tabs">
  <a class="btn" href="#">Button 1</a>
  <a class="btn" href="#">Button 2</a>
  <a class="btn" href="#">Button 3</a>
  <a class="btn" href="#">Button 4</a>
  <a class="btn" href="#">Button 5</a>
  <a class="btn" href="#">Button 6</a>
</div>