How to push oveflowing items inside a grid column to next grid column-CodePudding

Here i am tying to map the API items into a grid column and i want 6 items per grid column, when a column fill with 6 items i want it to break and fill the remaining items into the next column (again 6)

Is there a way to limit items per column?

CodePudding user response：

You need a couple of things: setting 6 rows to the grid and requiring it to fill up columns first rather than rows

This snippet uses grid-template-rows and grid-auto-flow:

.grid {
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  grid-template-columns: repeat(auto, auto);
  grid-auto-flow: column;
}

</style>

<div >
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>