Grid-Layout von divs in angular2

Question

Ich habe eine Ansicht in meiner Anwendung, wo ich Thumbnails in einem Rasterlayout anzeigen möchte. Wenn ich divs erstellen ohne Inhalt erscheinen sie wie gewünscht:

Wenn ich Inhalte an die divs hinzufügen, das Layout drunter und drüber geht:

kann ich nicht herausfinden, warum es dass dies geschieht.

Ich bin ein * ngFor Richtlinie für angular2 mit:

<div class="board-thumbnail-container" *ngFor="let board of boards"> 
     <img class="board-thumbnail" [src]="getBoardImage(board)"> 
     <h3><span>{{board}}</span></h3> 
    </div> 

und dies ist die CSS dahinter:

.container { 
    width:400px; 
} 
.board-thumbnail-container { 
    position: relative; 
    width: 174px; 
    height: 174px; 
    margin-right: 5px; 
    margin-bottom: 5px; 
    display: inline-block; 
    border-style: solid; 
    border-color: lightblue; 
    border-radius: 7px; 
    padding: 5px; 
    text-align: center; 
} 
.board-thumbnail { 
    position: relative; 
    max-width: 160px; 
    max-height: 160px; 
} 

.board-thumbnail-container > h3 { 
    position: absolute; 
    bottom: 0px; 
    left: 0; 
    width: 100%; 
} 
.board-thumbnail-container > h3 > span { 
    color: white; 
    letter-spacing: -1px; 
    background: rgb(0, 0, 0); /* fallback color */ 
    background: rgba(0, 0, 0, 0.7); 
    padding: 0px 5px 0px 5px; 
} 

Hier ist ein Plunker das Problem aufweist: http://plnkr.co/edit/Trl8MJ7wuzYEgRGzy5yA?p=preview

Answer 1

Es funktioniert, wenn ich vertical-align: top zu .board-thumbnail-container gab. Überprüfen http://plnkr.co/edit/HIiQrROahSMGggFWcnoX?p=preview

Answer 2

Dachte über die Verwendung von angular flex layout?