FlexGridPPH

controllers.application.js

import Ember from 'ember';

const featuredImage = {url: '//via.placeholder.com/300x200.png'};

export default Ember.Controller.extend({
  articles: [
    {title: 'foobar 1', featuredImage: {url: '//via.placeholder.com/600x400.png'}},
    {title: 'foobar 2', featuredImage},
    {title: 'foobar 3', featuredImage},
    {title: 'foobar 4', featuredImage},
    {title: 'foobar 5', featuredImage},
    {title: 'foobar 6', featuredImage},
    {title: 'foobar 7', featuredImage},
    {title: 'foobar 8', featuredImage},
    {title: 'foobar 9', featuredImage}
  ]
});

styles.app.css

.dashboard-article-grid {
  position: relative;
  background-color: gold;
  width: 935px;
  height: 845px;
  margin: 5px;
}

.dashboard-article-grid__cell {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 1px solid black;
  width: 300px;
  height: 200px;
}

.dashboard-article-grid__image {
  width: 100%;
  height: 100%;
}

.dashboard-article-grid__title {
  position: absolute;
  left: 20px;
  bottom: 40px;
}

.dashboard-article-grid__cell--one {
  top: 5px;
  left: 5px;
  width: 610px;
  height: 410px;
}

.dashboard-article-grid__cell--two {
  top: 5px;
  left: 625px;
}

.dashboard-article-grid__cell--three {
  top: 215px;
  left: 625px;
}

.dashboard-article-grid__cell--four {
  top: 425px;
  left: 5px;
}

.dashboard-article-grid__cell--five {
  top: 425px;
  left: 315px;
}

.dashboard-article-grid__cell--six {
  top: 425px;
  left: 625px;
}

.dashboard-article-grid__cell--seven {
  top: 635px;
  left: 5px;
}

.dashboard-article-grid__cell--eight {
  top: 635px;
  left: 315px;
}

.dashboard-article-grid__cell--nine {
  top: 635px;
  left: 625px;
}

templates.application.hbs

<div class="dashboard-article-grid">

  <div class="dashboard-article-grid__cell dashboard-article-grid__cell--one">
    <img class="dashboard-article-grid__image" src={{get articles "0.featuredImage.url"}}>
    <div class="dashboard-article-grid__title">{{get articles "0.title"}}</div>
  </div>  
  
  <div class="dashboard-article-grid__cell dashboard-article-grid__cell--two">
    <img class="dashboard-article-grid__image" src={{get articles "1.featuredImage.url"}}>
    <div class="dashboard-article-grid__title">{{get articles "1.title"}}</div>
  </div>  
  
  <div class="dashboard-article-grid__cell dashboard-article-grid__cell--three">
    <img class="dashboard-article-grid__image" src={{get articles "2.featuredImage.url"}}>
    <div class="dashboard-article-grid__title">{{get articles "2.title"}}</div>
  </div>  
  
  <div class="dashboard-article-grid__cell dashboard-article-grid__cell--four">
    <img class="dashboard-article-grid__image" src={{get articles "3.featuredImage.url"}}>
    <div class="dashboard-article-grid__title">{{get articles "3.title"}}</div>
  </div>  
  
  <div class="dashboard-article-grid__cell dashboard-article-grid__cell--five">
    <img class="dashboard-article-grid__image" src={{get articles "4.featuredImage.url"}}>
    <div class="dashboard-article-grid__title">{{get articles "4.title"}}</div>
  </div>  
  
  <div class="dashboard-article-grid__cell dashboard-article-grid__cell--six">
    <img class="dashboard-article-grid__image" src={{get articles "5.featuredImage.url"}}>
    <div class="dashboard-article-grid__title">{{get articles "5.title"}}</div>
  </div>  
  
  <div class="dashboard-article-grid__cell dashboard-article-grid__cell--seven">
    <img class="dashboard-article-grid__image" src={{get articles "6.featuredImage.url"}}>
    <div class="dashboard-article-grid__title">{{get articles "6.title"}}</div>
  </div>  
  
  <div class="dashboard-article-grid__cell dashboard-article-grid__cell--eight">
    <img class="dashboard-article-grid__image" src={{get articles "7.featuredImage.url"}}>
    <div class="dashboard-article-grid__title">{{get articles "7.title"}}</div>
  </div>  
  
  <div class="dashboard-article-grid__cell dashboard-article-grid__cell--nine">
    <img class="dashboard-article-grid__image" src={{get articles "8.featuredImage.url"}}>
    <div class="dashboard-article-grid__title">{{get articles "8.title"}}</div>
  </div>  

</div>

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}