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