cornford-michael icon

Gridarea4-5

cornford-michael | PRO | 01/29/18 02:03:41 PM UTC | 0 ⭐ | 1366 👁️ | Never ⏰ | []
text |

3.52 KB

|

None

|

0 👍

/

0 👎

<!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;
}
.margin-b{margin-bottom: 2vh;}
 .wrapper_C4 {
        display: grid;
        grid-gap: 2vh;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        background-color: #f7f7f7;
        color: #444;
    }
	.wrapper_C5 {
        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: 66vh; }
   	.a5-1 {
        grid-column: 1 / span 1;
    }
	.a5-2 {
        grid-column: 2 / span 1;
    }
	.a5-3 {
        grid-column: 3 / span 1;
    }
	.a5-4 {
        grid-column: 4 / span 1;
    }
	.a5-5 {
        grid-column: 5 / span 1;
    }
	.b5-1 {
        grid-column: 1 / span 1;
    }
	.b5-2 {
        grid-column: 2 / span 1;
    }
	.b5-3 {
        grid-column: 3 / span 1;
    }
	.b5-4 {
        grid-column: 4 / span 1;
    }
	.b5-5 {
        grid-column: 5 / span 1;
    }
	.c5-1 {
        grid-column: 1 / span 1;
    }
	.c5-2 {
        grid-column: 2 / span 1;
    }
	.c5-3 {
        grid-column: 3 / span 1;
    }
	.c5-4 {
        grid-column: 4 / span 1;
    }
	.c5-5 {
        grid-column: 5 / span 1;
    }
      .
      	</style>
    <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
<div class="wrapper_C4 margin-b">
  <div class="box a5-1 thin">Height 7vh but 2vh padding</div>
  <div class="box a5-2 thin">Height 7vh but 2vh padding</div>
  <div class="box a5-3 thin">Height 7vh but 2vh padding</div>
  <div class="box a5-4 thin">Height 7vh but 2vh padding</div>
   <div class="box b5-1 thin">Height 7vh but 2vh padding</div>
  <div class="box b5-2 thin">Height 7vh but 2vh padding</div>
  <div class="box b5-3 thin">Height 7vh but 2vh padding</div>
  <div class="box b5-4 thin">Height 7vh but 2vh padding</div>
    <div class="box c5-1 thin">Height 7vh but 2vh padding</div>
  <div class="box c5-2 thin">Height 7vh but 2vh padding</div>
  <div class="box c5-3 thin">Height 7vh but 2vh padding</div>
  <div class="box c5-4 thin">Height 7vh but 2vh padding</div>
 </div>
<div class="wrapper_C5">
  <div class="box a5-1 thin">Height 7vh but 2vh padding</div>
  <div class="box a5-2 thin">Height 7vh but 2vh padding</div>
  <div class="box a5-3 thin">Height 7vh but 2vh padding</div>
  <div class="box a5-4 thin">Height 7vh but 2vh padding</div>
   <div class="box b5-1 thin">Height 7vh but 2vh padding</div>
  <div class="box b5-2 thin">Height 7vh but 2vh padding</div>
  <div class="box b5-3 thin">Height 7vh but 2vh padding</div>
  <div class="box b5-4 thin">Height 7vh but 2vh padding</div>
    <div class="box c5-1 thin">Height 7vh but 2vh padding</div>
  <div class="box c5-2 thin">Height 7vh but 2vh padding</div>
  <div class="box c5-3 thin">Height 7vh but 2vh padding</div>
  <div class="box c5-4 thin">Height 7vh but 2vh padding</div>
 </div>
  </body>
</html>

Comments