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

Question

我在构建响应式网站(例如 Bootstrap 3、Foundation)时有大量的 div/float 背景，并曾短暂地使用过 Flex box，但一直在尝试在所有地方使用 Grid，因为它在解决许多问题方面确实非常出色。我似乎经常遇到这样的“简单”问题，感觉自己缺少一些基础知识，并且无法在文档中找到答案。无论如何，到代码。

给定这样的网格设置:

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

一旦内容填满其父元素的宽度，内容就不会换行。理想情况下，我可以让它自动换行而无需预先定义精确的像素测量值，例如 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));。这似乎不能满足我的需求——我必须为不同的视口(viewport)定义多个 grid-template-columns 测量值，并且知道列内的元素的合适宽度是多少。我更愿意说 grid-auto-columns: max-content; 然后让元素简单地换行。

这可以用网格实现吗？我错过了什么/误解了什么？

请参阅 Codepen 以及演示该问题的完整示例:https://codepen.io/csdv/pen/OrbrzJ

Answer 1

我不明白 current iteration of CSS Grid 这怎么可能。

正如您已经发现的那样，您至少需要在列上定义一个固定的最小宽度，以便在某些时候强制换行。

不幸的是，对于自动重复，最小长度不能单独为 auto、min-content 或 max-content，因为那是 forbidden in the specification .

据我所知，这是您可以使用 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>