Gabe O'Leary Gabe O'Leary - 8 months ago 178
CSS Question

Grid layout of divs in angular2

I have a view in my application where I would like to display thumbnails in a grid layout. When I create divs with no content they appear as desired:

enter image description here

When I add content to the divs, the layout goes all haywire:
enter image description here

I can't figure out why it is that this is happening.

I'm using a *ngFor directive for angular2:

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

and this is the css behind it:

.container {
.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;

Here is a plunker exhibiting the problem:


It is working when I gave vertical-align: top to .board-thumbnail-container. Check