<!DOCTYPE html>
<html>
  <head>
    <title>Example 26</title>
    <meta charset="utf-8">
    <style>
body {
  margin: 40px;
  font: 80% Arial, Helvetica, sans-serif;

}

.wrapper {
  display: grid;
  background: no-repeat url(grid.png);
  grid-gap: 10px;
  grid-template-columns:  repeat(6, 150px);
  grid-template-rows: repeat( 4, 150px);
  background-color: #fff;
  color: #444;
}

.box {
  border: 1px solid #444;
  padding: 20px;
  font-size: 150%;
}

.a {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  align-self: stretch;
}

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

.c {
  grid-column: 1 / 3;
  grid-row: 3 /  6;
  align-self: start;
}

.d {
  grid-column: 3 / 5;
  grid-row: 3 / 6;
  align-self: center;
}

.e {
  grid-column: 5 / 7;
  grid-row: 1 / 6;
  align-self: stretch;
}





   </style>
</head>

 <body>

<div class="wrapper">
  <div class="box a">
    <p>This is box A. </p>
    <code>align-self: stretch</code>
  </div>
  <div class="box b">
    <p>This is box B.</p>
    <code>align-self: end</code>
  </div>
  <div class="box c">
    <p>This is box C.</p>
    <code>align-self: start</code>

  </div>
  <div class="box d">
    <p>This is box D.</p>
    <code>align-self: center</code>
  </div>
  <div class="box e">
    <p>Each of the boxes on the left has a grid area of 3 columns and 3 rows (we're counting the gutter col/row). So each covers the same size area as box A.</p>
    <p>The align-self property is used to align the content inside the grid-area.</p>
  </div>
</div>
</body>
</html>
