<body>
  

<h2 class="nogrid">It looks like you don't have CSS Grid module enabled. Grid module is really cool. Try downloading Firefox Nightly, Safari Technology Preview, or go to chrome://flags and tick "Enable experimental Web Platform features". You won't be disappointed! </h2>

<div class="gridcontainer">
    <div class="item1"></div>
    <div class="item2"></div>
   
  <a class="item4" href="https://github.com/Ollie-w/gridStarter"><div></div></a>
  <a class="item5" href="https://github.com/Ollie-w"><div></div></a>
   <div class="item6"></div>
    <div class="item7"></div>


  </div>
  </body>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-image: linear-gradient(to top right, red, blue);
}

@supports not(display:grid) {
 .gridcontainer, [class^="item"] {
  display: none;
}
  
  .nogrid {
    text-align: center;
    font-size:  7vmin;
    max-width:  700px;
    margin: auto;
    padding: 5%;
    margin-top: 5%;
    box-shadow: 10px 10px 70px -20px rgba(0, 0, 0, 0.8);
  }
  }

@supports (display:grid) {
  .nogrid {
    display: none;
  }
  
  .gridcontainer {
    display: grid;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-content: center;
  grid-template-columns: repeat(5, 20vmin);
  grid-template-rows: repeat(5, 20vmin);
}
  
  .item1 {
  background-color: #1abc9c;
    grid-row: 1 / 3;
    grid-column: 1 / 3;
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/429997/cssgrid.png);
    background-size: 75%;
    background-repeat: no-repeat;
    background-position: center;
}

 .item2 {
   background-color: #3498db;
   grid-row: 4;
 }



 .item4 {
   background-color: #bdc3c7;
   grid-column: 3/ 4;
   grid-row: 3 / 4;
   background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/429997/Twitter_Logo_White_On_Blue_copy.svg);
   background-size: 50%;
   background-repeat: no-repeat;
   background-position: center;
 }

 .item5 {
   background-color: #2ecc71;
   background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/429997/GitHub-Mark.svg);
   background-repeat: no-repeat;
   grid-column: 5 / 6;
   grid-row: 3 / 4;
   background-size: 50%;
   background-position: center;
 }

 .item6 {
   background-color: #16a085;
   grid-column: 4 / 5;
   background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/429997/facebook.svg);
   background-size: 50%;
   background-repeat: no-repeat;
   background-position: center;
 }
  
  .item7 {
    /*background-color: green; */
    grid-column: 3;
    grid-row: 5 / 6;
  }
  
  [class^="item"] {
    background-color: rgba(250, 250, 250, 0.4);
    border: 1px transparent solid;
    mix-blend-mode: screen;
  }
  
  [class^="item"]:hover {
    background-color: rgba(250, 250, 250, 0.6);
    border: 1px white solid;
  } 

}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.