FlexGridPPH

controllers.application.js

import Ember from 'ember';

const featuredImage = {url: '//via.placeholder.com/600x400.png'};

export default Ember.Controller.extend({
  articles: [
    {title: 'foobar 1', featuredImage},
    {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 {
  width: 930px;
}

.dashboard-article-grid__row {
  display: flex;
  margin: 0;
}

.dashboard-article-grid__column {
  width: 300px;
  height: 200px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  align-items: flex-start;
}

.dashboard-article-grid__column--large {
  width: 600px;
  height: 420px;
}

.dashboard-article-grid__cell {
  position: relative;
  margin: 5px;
}

.dashboard-article-grid__column--large .dashboard-article-grid__cell {
  margin: 0;
}

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

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

templates.application.hbs

<div class="dashboard-article-grid">
  <div class="dashboard-article-grid__row">
    <div class="dashboard-article-grid__column dashboard-article-grid__column--large">
      <div class="dashboard-article-grid__cell">
        <img class="dashboard-article-grid__image" src={{articles.[0].featuredImage.url}}>
        <div class="dashboard-article-grid__title">{{articles.[0].title}}</div>
      </div>
    </div>
    <div class="dashboard-article-grid__column">
      <div class="dashboard-article-grid__cell">
        <img class="dashboard-article-grid__image" src={{articles.[1].featuredImage.url}}>
        <div class="dashboard-article-grid__title">{{articles.[1].title}}</div>
      </div>
      <div class="dashboard-article-grid__cell">
        <img class="dashboard-article-grid__image" src={{articles.[2].featuredImage.url}}>
        <div class="dashboard-article-grid__title">{{articles.[2].title}}</div>
      </div>
    </div>
  </div>
  
  <div class="dashboard-article-grid__row">
    <div class="dashboard-article-grid__column">
      <div class="dashboard-article-grid__cell">
        <img class="dashboard-article-grid__image" src={{articles.[3].featuredImage.url}}>
        <div class="dashboard-article-grid__title">{{articles.[3].title}}</div>
      </div>
    </div>
    <div class="dashboard-article-grid__column">
      <div class="dashboard-article-grid__cell">
        <img class="dashboard-article-grid__image" src={{articles.[4].featuredImage.url}}>
        <div class="dashboard-article-grid__title">{{articles.[4].title}}</div>
      </div>
    </div>
    <div class="dashboard-article-grid__column">
      <div class="dashboard-article-grid__cell">
        <img class="dashboard-article-grid__image" src={{articles.[5].featuredImage.url}}>
        <div class="dashboard-article-grid__title">{{articles.[5].title}}</div>
      </div>
    </div>
  </div>
  
  
  <div class="dashboard-article-grid__row">
    <div class="dashboard-article-grid__column">
      <div class="dashboard-article-grid__cell">
        <img class="dashboard-article-grid__image" src={{articles.[6].featuredImage.url}}>
        <div class="dashboard-article-grid__title">{{articles.[6].title}}</div>
      </div>
    </div>
    <div class="dashboard-article-grid__column">
      <div class="dashboard-article-grid__cell">
        <img class="dashboard-article-grid__image" src={{articles.[7].featuredImage.url}}>
        <div class="dashboard-article-grid__title">{{articles.[7].title}}</div>
      </div>
    </div>
    <div class="dashboard-article-grid__column">
      <div class="dashboard-article-grid__cell">
        <img class="dashboard-article-grid__image" src={{articles.[8].featuredImage.url}}>
        <div class="dashboard-article-grid__title">{{articles.[8].title}}</div>
      </div>
    </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"
  }
}