如何并排创建4个div？

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.container {
  display: flex;
}

.box {
  flex: 1;
  height: 100px;
  background-color: #ccc;
  margin: 10px;
}

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
}

.box {
  height: 100px;
  background-color: #ccc;
}