<div class="app-layout">
  <div class="box tweets">Tweets</div>
  <div class="box replies">Replies</div>
  <div class="box search">Search</div>
  <div class="box messages">Messages</div>
</div>
body {
  margin: 0;
  font-family: Arial;
  background-color: #f2f2f2;
}

.box {
  color: #fff;
  padding: 1em;
  text-align: center;
  background-color: #efefef;
}

.tweets   { background-color: #A2DED0; }
.replies  { background-color: #F4D03F; }
.search   { background-color: #6C7A89; }
.messages { background-color: #59ABE3; }

/* Our Grid Code */
.app-layout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 100vh;
}

/* try to resize the screen */
@media screen and (max-width: 1024px) {
  .app-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 50vh 50vh;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.