CSS how to force a new div to go under the previous one since the width won't fit

Question

Assuming I have the following HTML

<div className="cards-container">
  <div className="card" />
  <div className="card" />
  <div className="card" />
  <div className="card" />
  <div className="card" />
  <div className="card" />
</div>

Now I have 6 Cards. These cards for instance appear on the top of each other in my screen on the left side.

Card1
Card2
Card3
Card4
Card5
Card6

I'd like to make them appear as follows:

Card1 Card2 Card3
Card4 Card5 Card6

And if the width of the screen is smaller, it would go like this

Card1 Card2
Card3 Card4
Card5 Card6

css:

.cards-container {
   height: 100%;
   overflow: auto;

  .card {
     border-radius: 7px;
     height: 228px;
     width: 361px;
     min-width: 361px;
     margin-left: 23px;
     margin-top: 8px;
   }
}

I thought about splitting the cards into 2/3 arrays with Javascript based on the screen width then render each row with flex-direction: column; but now sure if that's right.

Something like

 const Array1 = [Card1, Card4]
 const Array2 = [Card2, Card5]
 const Array3 = [Card3, Card6]

Then add them into 1 array as follows Arrays = [Array1, Array2, Array3]

then render them on sparate divs.