Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
.wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 1em;
  justify-items: stretch;
  align-items: stretch;
}

.wrapper > div {
  background: #eee;
  padding: 1em;
}

.wrapper > div:nth-child(odd) {
  background: #ddd;
}

.box1 {
  align-self: start;
  grid-column: 1/3;
  grid-row: 1/3;

}
.box2 {
  align-self: end;
  grid-column: 3;
  grid-row: 1/3;
}

.box3 {
  justify-self: end;
  grid-column:2/4;
  grid-row:3;
}

.box4 {
  grid-column: 1;
  grid-row: 2/4;
  border: 1px solid #333;
}
</style>
</head>
<body>
  <div class="wrapper">
    <div class="box box1">Box 1</div>
    <div class="box box2">Box 2</div>
    <div class="box box3">Box 3</div>
    <div class="box box4">Box 4</div>
  </div>


<script id="jsbin-source-css" type="text/css">.wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 1em;
  justify-items: stretch;
  align-items: stretch;
}

.wrapper > div {
  background: #eee;
  padding: 1em;
}

.wrapper > div:nth-child(odd) {
  background: #ddd;
}

.box1 {
  align-self: start;
  grid-column: 1/3;
  grid-row: 1/3;

}
.box2 {
  align-self: end;
  grid-column: 3;
  grid-row: 1/3;
}

.box3 {
  justify-self: end;
  grid-column:2/4;
  grid-row:3;
}

.box4 {
  grid-column: 1;
  grid-row: 2/4;
  border: 1px solid #333;
}

</script>
</body>
</html>