Cacher is the code snippet organizer for pro developers

.grid {
    display: grid; /* Mobile Version! */
    grid-template-columns: 1fr 500px 500px 1fr; 
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas:
    "title title"
    "header header"
    "sidebar sidebar"
    "content content"
    "footer footer";
}

.title {
    grid-area: title;
}
.header {
    grid-area: header;
}
.sidebar {
    grid-area: sidebar;
}
.content {
    grid-area: content;
}
.footer {
    grid-area: footer;
}


.grid div:nth-child(even) {
background-color: red;
}
.grid div:nth-child(odd) {
background-color:green;
}

        <div class="grid">
             <div class="title">Title</div>
             <div class="header">Header</div>
             <div class="sidebar">Sidebar</div>
             <div class="content">Content</div>
             <div class="footer">Footer</div>           
        </div>