Semantic UI: Cards next to each other?

Question

Problem is instead of showing next to each other they are all justified to left and placed one under another. I want them to go all the way from left to right and wrap to next row if another card won't fit. The way display: flex works.

Is there any "semantic" way to do it? The only thing I can think of is placing an additional div inside the grid that will be a flex container.

I am using Meteor and Blaze but I believe it has nothing to do with it. The question lies in Semantic UI and HTML/CSS.

My HTML looks like this:

<div class="ui grid">
    <div class="two wide column">
    </div>

    <div class="twelve wide column">
        {{> card}}
        {{> card}}
        {{> card}}
        {{> card}}
        {{> card}}
        {{> card}}
    </div>

    <div class="two wide column">
    </div>
</div>

Where each card template is:

<div class="ui card">
    <div class="image">
        <img src="http://placehold.it/256x256">
    </div>
    <div class="content">
            <a class="header">Kristy</a>
        <div class="meta">
            <span class="date">Joined in 2013</span>
        </div>
        <div class="description">
            Kristy is an art director living in New York.
        </div>
    </div>
    <div class="extra content">
        <a>
            <i class="user icon"></i>
            22 Friends
        </a>
    </div>
</div>

Answer 1

<div class="ui four doubling stackable cards">
    {{> card}}
    {{> card}}
    {{> card}}
    {{> card}}
    {{> card}}
    {{> card}}
    {{> card}}
</div>

And for the card all you need to do is change ui card to ui fluid card for the card to expand to maximum available space.

This is what I was able to find. It works very well, just as I needed it to work.

doubling gives the nice effect of going down from 4 to 2 cards per row on medium screens while stacking will go from 2 to 1 per row on small screens like phones for the ultimate viewing pleasure.

Thanks to everyone, your answers helped in finding this solution. I will mark it as answer because I believe this is the most "semantic" way of doing this.

Answer 2

You can pop each card into its own column and surround it using a stackable grid -> http://semantic-ui.com/collections/grid.html#stackable

<div class="ui stackable twelve column grid">
    {{> card}}
    {{> card}}
    {{> card}}
    {{> card}}
    {{> card}}
    {{> card}}
</div>

and each card is surrounded by

<div class="column">
   ... content
</div>