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!

Please review and comment on my answer, and let me know if something is unclear or missing. If not, then it would be great if you could accept the answer that helped you the most. — Asons, Sep 06 '17 at 05:29
When users spend their own free time helping you, the least you can do is to respond, and since you chose not to, I deleted my answer. — Asons, Sep 10 '17 at 16:44

score 0 · Answer 1 · answered Sep 02 '17 at 01:43

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

CSS Card Flexible Row Behavior

1 Answers1