Как сделать так, чтобы элементы в сетке помещались в один ряд?

Question

Я пытаюсь подогнать 3 деления внутри сетки.Однако я хотел бы повторно использовать код для других сеток, где может быть более одной сетки.Возможно ли это, или я должен написать код отдельно?

  <div class="div-wrapper">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
  </div>

.div-wrapper{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-gap:5px;
  width:100%;
  height:10vh;
  background:black;
}

Тем не менее, я хотел бы использовать приведенный выше код для других оболочек с более чем 3-мя div внутри, например

    <div class="div-wrapper">
      <div class="div1"></div>
      <div class="div2"></div>
      <div class="div3"></div>
      <div class="div4"></div>
      <div class="div5"></div>
    </div>

Answer 1

Тогда не говорите, что у вас есть 3 столбца.

Вы можете просто использовать grid-auto-flow следующим образом:

.div-wrapper {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 5px;
  width: 100%;
  height: 10vh;
}

Тогда он будет вести себя как flex, и вы можете иметьавтоматическое количество столбцов.

Answer 2

Используйте BootStrap "row" class, смотрите здесь

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="row">
       <div class="p-2">one</div>
       <div class="p-2">two</div>
       <div class="p-2">three</div>
</div>

Это будет показано в строке.

Answer 3

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-row justify-content-between my-flex-container">
  <div class="p-2 my-flex-item">1</div>
  <div class="p-2 my-flex-item">2</div>
  <div class="p-2 my-flex-item">3</div>
</div>


<div class="d-flex flex-row justify-content-between my-flex-container">
  <div class="p-2 my-flex-item">1</div>
  <div class="p-2 my-flex-item">2</div>
  <div class="p-2 my-flex-item">3</div>
  <div class="p-2 my-flex-item">4</div>
  <div class="p-2 my-flex-item">5</div>
</div>

Использовать столбцы начальной загрузки flex более подробно здесь https://getbootstrap.com/docs/4.1/utilities/flex/

<div class="d-flex flex-row justify-content-between my-flex-container">
     <div class="p-2 my-flex-item">1</div>
     <div class="p-2 my-flex-item">2</div>
     <div class="p-2 my-flex-item">3</div>
</div>

<div class="d-flex flex-row justify-content-between my-flex-container">
     <div class="p-2 my-flex-item">1</div>
     <div class="p-2 my-flex-item">2</div>
     <div class="p-2 my-flex-item">3</div>
     <div class="p-2 my-flex-item">4</div>
     <div class="p-2 my-flex-item">5</div>
</div>