text: <!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>
  