CSS Card Flexible Row Behavior

Question

I am currently trying to create this effect without the use of Semantic UI. Link to codepen: https://codepen.io/anon/pen/YxBOax

<div class="ui container">
  <div class="ui four cards stackable">
   <div class="teal card">Card1</div>
   <div class="teal card">Card2</div>
   <div class="teal card">Card3</div>
   <div class="teal card">Card4</div>
   <div class="teal card">Card5</div>
   <div class="teal card">Card6</div>
 </div>
</div> 

As you can see here, you only have to set up the class "ui four cards stackable" and then you are able to add as many card divs as you want with the maximum of 4 cards a row. And when reaching a certain size smaller size it jumps into single rows.

In my application the user is able to add as many cards as he wants, which does not make it possible to create rows for every 4 cards...

How do I do that efficiently with the help of plain CSS ? Currently I am getting into CSS Grid, maybe this could help me ?

Thank you!

Answer 1

Here's a plain CSS version using CSS Grid:

revised codepen

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 20%);
  justify-content: space-between;
  grid-gap: 20px;
  padding: 20px;
  width: 90%;
  margin: 0 auto;
  background-color: gray;
}

.card {
  background-color: whitesmoke;
}

@media ( max-width : 500px) {
  .container {
    grid-template-columns: 1fr;
  }
}

<div class="container">
  <div class="card">Card1</div>
  <div class="card">Card2</div>
  <div class="card">Card3</div>
  <div class="card">Card4</div>
  <div class="card">Card5</div>
  <div class="card">Card6</div>
</div>

For an explanation of how these properties work, see this post:

• CSS-only masonry layout but with elements ordered horizontally