<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;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.