Not long ago I was playing around with some HTML & CSS Grids. I decided to make something creative so chose Microsoft’s Logo. First I created the HTML which you can see below:

<div class="microsoft-logo-outer">
<div class="microsoft-logo-inner"> 
<div class="top-left"></div>
<div class="top-right"></div>
<div class="bottom-left"></div>
<div class="bottom-right"></div>

Above I created an inner div (.microsoft-logo) and outer div (.microsoft-logo-outer) holder for the four boxes which I named and are relative to their position within the logo. Now lets look at the CSS:

.microsoft-logo-outer {
  margin: 30px auto;
  width: 320px;
.microsoft-logo-inner {
     background-color: #fff;
     display: grid;
     grid-template-columns: 150px 150px;
     grid-template-rows: 150px 150px;
     grid-gap: 1em;
.top-left {
     background-color: #f35325;
.top-right {
     background-color: #81bc06;
.bottom-left {
     background-color: #05a6f0;
.bottom-right {
     background-color: #ffba08;

The outer div .microsoft-logo-outer aligns our logo to the centre of the page while the .microsoft-logo-inner div holds the grid properties and within the grid we have our four boxes which have been assigned a different colour relevant to the Microsoft Logo.

See the Pen Microsoft Logo using CSS Grid by Shane Walsh (@technicalshane) on CodePen.0