CSS网格项始终位于一行上

Question

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

My code可以使用，但是我更希望每个标签都在一行上。

现在：

标签a very very very very long label应该在一行上，而不是在两行上。

代码：

.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和a very very very very long label标签周围的可用空间较少

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>

如果您希望各列水平共享可用的视口空间，则还可以使用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>

Answer 2

我建议您切换到flexbox。如果垂直放置的图块包含更多文本，则图块不必要地占用了空间。

.container {
  background-color: #aaa;
  width:400px;
  display:flex;
  flex-wrap: wrap;
}
.container:after {
  flex: auto;
  content:'';
  flex-grow: 100;
}

.child {
  margin: 2px 1px;
  padding: 10px;
  background-color: #888;
  white-space: nowrap;
  flex:1;
  text-align: center;
}

<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>

Answer 3

单行是什么意思？如果您要换行，只需添加以下内容

    <br>

如果您希望单元格的内容在一行上，请尝试使用溢出

https://www.w3schools.com/css/css_overflow.asp 这可能会有所帮助。