Элемент сетки CSS всегда на одной строке

Question

Я пытаюсь создать простой макет: есть несколько меток, которые нужно разместить на разных строках, потому что не хватает места для всех.Для этого я использую Grid.

Мой код работает, но я предпочитаю, чтобы каждый ярлык был в одной строке.

Сейчас:

Метка 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>

Как мне изменить свой код?

---

В этот код ручки Я использую опубликованный код@Saksham и я изменяю только text-align с center на left.

Изменение размера окна я получаю это:

Но я хочу это:

Как видите, вокруг dictionary и a very very very very long label этикеток * 1051 меньше свободного места*

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 Это может быть полезно.