reponsive CSSGrid page

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
    <meta name="dcterms.created" content="Mon, 15 Jan 2018 00:09:05 GMT">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title></title>
    <style>

body {
  margin: 2vh;
  background-color: #d7f7f7;
}

.wrapper {
        display: grid;
        grid-gap: 2vh;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        background-color: #f7f7f7;
        color: #444;
    }

    .box {
        background-color: white;
        color: black;
        border-radius: 5px;
        padding: 2vh;
        font-size: 150%;


    }
	.thin{height: 7vh; }
	.body{height: 53vh; }


    .a {
        grid-column: 1 / span 5;
    }

    .c {
        grid-column: 1 ;
        grid-row: 2 ;
    }
    .d {
        grid-column: 2 / span 4;
        grid-row: 2  ;
    }
	.e {
        grid-column: 1 / span 5;
        grid-row: 3  ;
    }

	.f {
        grid-column: 1 / span 5;
        grid-row: 4  ;
    }


	</style>
    <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
<div class="wrapper">
  <div class="box a thin">Height 7vh but 2vh padding</div>
  <div class="box c body">grid-gap: 2vh</div>
  <div class="box d body">Height 53vh but 2vh padding</div>
  <div class="box e thin">Height 7vh but 2vh padding</div>
  <div class="box f thin">Height 7vh but 2vh padding</div>

</div>
  </body>
</html>