<html>
    <body>
        <div class="container">
          <div class="normal">
            1
          </div>
          <div class="vertical">
            2
          </div>
          <div class="horizontal">
            3
          </div>
          <div class="normal">
            4
          </div>
          <div class="normal">
            5
          </div>
          <div class="big">
            6
          </div>
          <div class="normal">
           7
          </div>
          <div class="vertical">
            8
          </div>
          <div class="horizontal">
            9
          </div>
          <div class="normal">
           10
          </div>
          <div class="normal">
            11
          </div>
        </div>
        </div>
  </body>
</html>
$darkblue: #00695C;
$blue:#009688;
$lightblue: #4DB6AC;
$teal: #80CBC4;

.container {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-auto-rows: 150px;
    grid-auto-flow: dense;
}

.horizontal {
  background: $darkblue;
  grid-column: span 2;
}

.vertical {
  background: $blue;
  grid-row: span 2;
}

.big {
  background: $lightblue;
  grid-column: span 2;
  grid-row: span 2;
}
.normal {
  background: $teal;

}

/* other stuff */

.container > div{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    color: white;
    font-family: helvetica;
}

html, body {
    background-color: white;
    margin: 10px;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.