<div class="sidebar"><h2>Sidebar</h2></div>

 <div class="main">
   <h2>Main</h2>
    <p>Removed '-ms-' prefixes in css.</p>  <p id = 'my-Bad'>Still only get one column regardless of browser size.</p>  
    <p>Oh, I forgot to enable “Experimental Web Platform Features” flag in Chrome browser.</p>  
    <p>There, that's better.  :)</p>  
</div>
   
<div class="footer"><h2>Footer</h2></div>

<div class="header"><h2>Header</h2></div>

<div class="ads">
  <h2>Ads</h2>
  <img src="http://lorempixel.com/200/200/business/" />
  <img src="http://lorempixel.com/200/200/city/" />
  <img src="http://lorempixel.com/200/200/animals/" />
</div>

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  padding: 10px;
  display: grid;
  grid-columns: 200px 15px 1fr 15px 100px;
  grid-rows: auto 15px auto 15px auto;
}

.content {
  background: beige;
  padding: 0;
}

.header {
  background: tomato;
  grid-column-span: 5;
  grid-row: 1;
}

.footer {
  background: deepskyblue;
}

.footer {
  background: deepskyblue;
  grid-row: 5;
  grid-column-span: 5;
}

.main {
  background: orangered;
  grid-column: 3;
  grid-row: 3;
}

.sidebar {
  background: green;
  grid-column: 1;
  grid-row: 3;
}

.ads {
  background: gold;
  grid-column: 5;
  grid-row: 3;
}

h2 {
  margin-top: 0;
}

img {
  display: block;
  max-width: 100%;
  width: auto;
  margin: 0 auto 10px;
}

div {
  color: black;
  padding: 10px;
}

p {
  margin: 0 0 1em 0;
}

#my-Bad {
  text-decoration: line-through;
}

@media all and (max-width: 600px) {
  body {
    grid-columns: 1fr;
    grid-rows: auto (1% auto)[4];
  }
  .header,
  .ads,
  .sidebar,
  .main,
  .footer {
    grid-column: 1;
  }
  .header {
    grid-row: 1;
  }
  .ads {
    grid-row: 3;
  }
  .main {
    grid-row: 5;
  }
  .sidebar {
    grid-row: 7;
  }
  .footer {
    grid-row: 9;
  }
  .ads {
    display: grid;
    grid-columns: 1% (32% 1%)[3];
    grid-rows: 2;
  }
  .ads h2 {
    grid-row: 1;
    grid-column-span: 3;
  }
  .ads img {
    margin: 0;
    grid-row: 2;
  }
  .ads img:nth-of-type(1) {
    grid-column: 2;
  }
  .ads img:nth-of-type(2) {
    grid-column: 4;
  }
  .ads img:nth-of-type(3) {
    grid-column: 6;
  }
}