angular2のdivのグリッドレイアウト

グリッドレイアウトでサムネイルを表示したいアプリケーションのビューがあります。私はコンテンツのないdivを作成するとき、彼らは、必要に応じて表示されます。angular2のdivのグリッドレイアウト

私はdiv要素にコンテンツを追加し、レイアウトはすべてのゴチャゴチャ行く：それはなぜ

私が把握することはできませんこれが起こっていること。

私はangular2用* ngForディレクティブを使用しています：

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

、これはその背後にあるCSSです：ここでは

.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; 
}

は問題を呈するplunkerです： http://plnkr.co/edit/Trl8MJ7wuzYEgRGzy5yA?p=preview

出典

2016-06-01 Gabe O' Leary

jsfidlleまたはplunkerを作成できますか？ –

@ArunGhosh私は質問（http://plnkr.co/edit/Trl8MJ7wuzYEgRGzy5yA?p=preview）への大胆なリンクを追加しました –