<div class="container">
    <div class="container__header">Header</div>
    <div class="container__leftsidebar">Left sidebar</div>
    <div class="container__main">
        <p class="playground__placeholder">
            Upon, from man greater face had. Him after under shall green one make us third. Their fourth appear shall to, bring. Two waters signs. Under after female god us land third may, living fowl moved don't. Void she'd place. Fruitful creepeth. Likeness.
        </p>
    </div>
    <div class="container__rightsidebar">Right sidebar</div>
    <div class="container__footer">Footer</div>
</div>

body {
    color: rgb(51 65 85);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
* {
    box-sizing: border-box;
}

.container__header,
.container__footer,
.container__leftsidebar,
.container__rightsidebar {
    display: grid;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
}
.container__header {
    border-bottom: 1px solid rgb(203 213 225);
}
.container__footer {
    border-top: 1px solid rgb(203 213 225);
}
.container__main {
    border-left: 1px solid rgb(203 213 225);
    border-right: 1px solid rgb(203 213 225);
    padding: 0.5rem;
}

.container {
    display: grid;
    grid-template-columns: 4.5rem 1fr 4.5rem;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "header header header"
                        "left-sidebar main right-sidebar"
                        "footer footer footer";
    height: 100vh;
}
.container__header {
    grid-area: header;
}
.container__leftsidebar {
    grid-area: left-sidebar;
}
.container__main {
    grid-area: main;
}
.container__rightsidebar {
    grid-area: right-sidebar;
}
.container__footer {
    grid-area: footer;
}