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

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


css css-grid word-wrap
person Charlie Schliesser    schedule 19.12.2018    source источник
comment
Думаю, это может вам помочь, у меня был аналогичный вопрос, так как я хотел иметь минимальное количество столбцов, но иметь возможность обернуть их, даже если оставалось место stackoverflow.com/q/53434024/8437694   -  person IvanS95    schedule 19.12.2018
comment
AFAIK вам всегда нужно каким-то образом быть конкретным с шириной элементов сетки   -  person IvanS95    schedule 19.12.2018

Ответы (2)


arrow_upward
7
arrow_downward

Я не понимаю, как это возможно с текущей версией 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>

person Michael Benjamin    schedule 19.12.2018
comment
Красивый. Я могу отказаться от идеи принудительно установить минимальную ширину и позволить остальным автоматически вычислять. Я остановился на том, что делает то, что я ищу - спасибо, Майкл! grid-template-columns: repeat(auto-fit, minmax(10rem, auto)); - person Charlie Schliesser; 19.12.2018
comment
Выглядит неплохо. Да, auto даже лучше, потому что он делает то, что вы хотите, и упрощает понимание кода. - person Michael Benjamin; 19.12.2018

arrow_upward
0
arrow_downward

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

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

or

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

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

person user14804027    schedule 10.12.2020