如何在不指定 minmax 大小的情况下强制此 CSS 网格换行？

Question

我有丰富的 div/float 构建响应式网站（例如 Bootstrap 3，Foundation）的背景，并曾短暂地使用过 Flex box，但一直在尝试在任何地方使用 Grid，因为它非常擅长解决一些问题。我似乎经常运行遇到 "simple" 此类问题，感觉自己缺少一些基础知识，并且无法在文档中找到答案。无论如何，到代码。

给定这样的网格设置：

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; 然后让项目简单地换行。

网格可以实现吗？我是什么missing/misunderstanding?

请参阅 Codepen，其中包含演示该问题的完整示例：https://codepen.io/csdv/pen/OrbrzJ

Answer 1

我不明白 current iteration of 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>

Answer 2

以 % 为单位指定网格暗淡度，例如：

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

或

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

文本将在定义为 %...

的网格元素内自动换行

如何在不指定 minmax 大小的情况下强制此 CSS 网格换行？

How can I force this CSS grid to wrap to a new line without specifying minmax sizes?

css

word-wrap

css-grid