style.css

*{margin:0;padding:0}.box{display:grid;grid-template-areas:"nav nav nav" "sidebar body body";grid-template-rows:85px 1fr;-ms-grid-rows:85px 1fr!important;grid-template-columns:1fr 1fr 1fr;-ms-grid-columns:1fr 1fr 1fr!important;-ms-grid-columns:1fr 1fr 1fr;-ms-grid-rows:1fr 1fr;display:-ms-grid;height:100vh;width:100vw}.box__default{grid-area:default}.box__nav{grid-area:nav;grid-area:nav,}.box__sidebar{grid-area:sidebar}.box__body{grid-area:body;grid-area:body,}.box__85px{grid-area:85px}.box__1fr{grid-area:1fr,;grid-area:1fr}.box__nav{-ms-grid-row:1;-ms-grid-column:1;-ms-grid-row-span:1;-ms-grid-column-span:3}.box__sidebar{-ms-grid-row:2;-ms-grid-column:1;-ms-grid-row-span:1;-ms-grid-column-span:1}.box__body{-ms-grid-row:2;-ms-grid-column:2;-ms-grid-row-span:1;-ms-grid-column-span:2}@media screen and (max-width:768px){.box{grid-template-areas:"nav nav nav" "body body body"}}@media screen and (max-width:768px){.box__sidebar{display:none}}@media screen and (max-width:768px){.box__nav{-ms-grid-row:1;-ms-grid-column:1;-ms-grid-row-span:1;-ms-grid-column-span:3}}@media screen and (max-width:768px){.box{-ms-grid-columns:1fr 1fr 1fr;-ms-grid-rows:1fr 1fr}}@media screen and (max-width:768px){.box__body{-ms-grid-row:2;-ms-grid-column:1;-ms-grid-row-span:1;-ms-grid-column-span:3}}.box__nav{background-color:#a9a9a9}.box__body{background-color:#d3d3d3}.box__sidebar{background-color:gray}