<div class="grid one">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="grid two">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

.grid {
  display: inline-grid;
  grid-gap: 5px;
  margin: 10px;
}
.one {
  grid-template-columns: repeat(3,auto);
  /* grid-auto-flow: row;  the default value */
}
.two {
  grid-template-rows: repeat(3,auto);
  grid-auto-flow: column;
}

/**/
.grid {
  max-width:600px;
  margin:10px;
  counter-reset:num;
}
.grid *{
  border:2px solid;
  font-size:30px;
  box-sizing:border-box;
  font-family:sans-serif;
  display:grid;
  place-content:center;
  padding:20px;
}
.grid *:before {
  content:counter(num);
  counter-increment:num;
}