<div class="grid-example">
  <div class="two-col">
    <img class="two-col" src="http://lorempixel.com/256/128/food" />
  </div>
  <div>
    <img src="http://lorempixel.com/128/128/food" />
  </div>
  <div>
    <img src="http://lorempixel.com/128/128/food" />
  </div>
  <div>
    <img src="http://lorempixel.com/128/128/food" />
  </div>
  <div class="two-col">
    <img src="http://lorempixel.com/256/128/food" />
  </div>
  <div class="two-row">
    <img src="http://lorempixel.com/128/256/food" />
  </div>
</div>
.grid-example {
  display: grid;

  grid-auto-flow: dense;

  grid-template-rows: repeat(3, 128px);
  grid-template-columns: repeat(3, [col-start] 128px);

  > div {
    border: 1px solid black;
  }
  
  .two-col {
    grid-column-end: span 2;
  }

  .two-row {
    grid-row-end: span 2;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.