html - CSS 网格项总是在一行中

Question

我正在尝试创建一个简单的布局:有些标签必须放在不同的行上，因为没有足够的空间容纳所有标签。我使用网格来执行此操作。

My code可行，但我更喜欢每个标签都应该在一行上。

现在:

标签 一个非常非常非常长的标签 应该在一行而不是两行。

代码:

.container {
  background-color: tomato;
  width: 100%;
  color: black;
  display: grid;
  grid-template-columns: repeat(5, auto);
  grid-gap: 5px 5px;
}

.child {
  border: 1px solid black;
}

<div class="container">
  <div class="child">apple</div>
  <div class="child">social</div>
  <div class="child">cat</div>
  <div class="child">computer</div>
  <div class="child">table</div>
  <div class="child">photograph</div>
  <div class="child">future of the world</div>
  <div class="child">something</div>
  <div class="child">yellow</div>
  <div class="child">romance</div>
  <div class="child">dictionary</div>
  <div class="child">a very very very very long label</div>
</div>

我怎样才能更改我的代码？

---

在this codepen我使用@Saksham 发布的代码，我只将 text-align 从 center 更改为 left。

改变窗口大小我明白了:

但我想要这个:

如您所见，dictionary 和非常非常非常长的标签 标签周围的可用空间较少

Answer 1

您可以在列定义中使用 max-content 而不是 auto - 并针对 container 的溢出进行调整(如果一些屏幕宽度)您可以使用 overflow: auto - 更改屏幕宽度并检查下面的演示:

.container {
  background-color: tomato;
  width: 100%;
  color: black;
  display: grid;
  grid-template-columns: repeat(5, max-content); /* added */
  grid-gap: 5px 5px;
   overflow: auto; /* handle overflow if needed */
}

.child {
  border: 1px solid black;
}

<div class="container">
  <div class="child">apple</div>
  <div class="child">social</div>
  <div class="child">cat</div>
  <div class="child">computer</div>
  <div class="child">table</div>
  <div class="child">photograph</div>
  <div class="child">future of the world</div>
  <div class="child">something</div>
  <div class="child">yellow</div>
  <div class="child">romance</div>
  <div class="child">dictionary</div>
  <div class="child">a very very very very long label</div>
</div>

如果你想让列水平共享可用的视口(viewport)空间，你也可以使用 minmax 函数，比如 grid-template-columns: repeat(5, minmax(max-content, 1fr)):

.container {
  background-color: tomato;
  width: 100%;
  color: black;
  display: grid;
  grid-template-columns: repeat(5, minmax(max-content, 1fr)); /* added */
  grid-gap: 5px 5px;
   overflow: auto; /* handle overflow if needed */
}

.child {
  border: 1px solid black;
}

<div class="container">
  <div class="child">apple</div>
  <div class="child">social</div>
  <div class="child">cat</div>
  <div class="child">computer</div>
  <div class="child">table</div>
  <div class="child">photograph</div>
  <div class="child">future of the world</div>
  <div class="child">something</div>
  <div class="child">yellow</div>
  <div class="child">romance</div>
  <div class="child">dictionary</div>
  <div class="child">a very very very very long label</div>
</div>