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

Я пришел из тяжелого опыта работы с 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

Источник

2 ответа

Решение

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

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

К сожалению, при автоматическом повторении минимальная длина не может быть auto, min-content или же max-content в одиночку, потому что это запрещено в спецификации.

Насколько я могу судить, с 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>

Источник

Укажите размер сетки в %, например:

      grid-template-columns: 25% 25% 25% 25%;

или же

      grid-template-columns: 25% auto auto auto;

Текст будет автоматически переноситься внутри элемента сетки, определенного как %...

Источник
Другие вопросы по тегам