How create a grid layout with paper-card

I am trying to mix the template repeater and the paper-card tutorial in the Polymer Starter Kit.

My aim is to copy that kind of grid :
_{(source: instantshift.com)}

I created two custom elements :

1. A list of employees
2. An employee

Employee List:

<style is="custom-style">
#board {
  @apply(--layout-vertical);           <<= HERE ARE DEFINED THE LAYOUT OF THE GRID
  @apply(--layout-wrap);
  height: 344px;
  width: 384px;
}
#board > paper-card {
  box-sizing: border-box;
  max-width: 184px;
  margin: 4px;
  flex: 0 0 auto;
}
</style>
  <template>
    <div id="board">
      <template is="dom-repeat" items="{{employeesArray}}">
          <employee-element name="{{item.title}}"
                           preview="{{item.preview}}"
                           width={{item.width}} height={{item.height}}>
          </employee-element>
      </template>
    </div>
  </template>

Employee :

<paper-card
  heading="{{name}}"
  image="{{preview}}"
  style="max-width:{{width}}px;
         max-height:{{height}}px;"
  >
  <div class="card-actions">
    <paper-icon-button class="favorite" icon="favorite"></paper-icon-button>
    <paper-icon-button class="bookmark" icon="bookmark"></paper-icon-button>
    <paper-icon-button class="share" icon="social:share"></paper-icon-button>
  </div>
</paper-card>

Here is what I get :

How can I approach the result expected ? Is there a setting making the card arranging themselves automatically ?

How can I get a "carriage return"-like behaviour ?

---

Answer results (thanks to @Snekw) :

Steps :

Add the following line where you import your elements (elements/elements.html in my case)

<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout-classes.html"> 

My Employee list element now looks like :

<style is="custom-style" include="iron-flex">
    .flex-wrap {
      @apply(--layout-horizontal);
      @apply(--layout-wrap);
    }
  </style>
  <template>
    <div class="container flex-wrap">
      <template is="dom-repeat" items="{{employeesArray}}">
          <employee-element name="{{item.title}}"
                           preview="{{item.preview}}"
                           width={{item.width}} height={{item.height}}>
          </employee-element>

      </template>
    </div>
  </template>

And I get this result :

I still have to fix the problem with the paper-card action panel.

You need to include the iron-flex class on your style tag.

<style is="custom-style" include="iron-flex">
//your styling
</style>

You will need to load the iron-flex-layout-classes.html element. Iron-flex-layout element contains the --layout-vertical and --layout-wrap properties.

More on iron-flex-layout here: iron-flex-layout-classes GitHub