<div class="container">
<div class="center-wrap">this is center</div>
<div class="left-wrap"></div>
<div class="right-wrap"></div>
</div>
*{
margin:0;
padding:0;
}
html,body{
width:100%;
height:100%;
text-align:center;
font-size:36px;
min-width:720px;
}
.container{
position:relative;
display:grid;
grid-template-columns: 200px auto 200px;
grid-template-rows: 100%;
grid-template-areas: "lt cr rt"
}
div{
height:100%;
}
.center-wrap{
grid-area: cr;
}
.left-wrap{
grid-area: lt;
background:#1ba1e2;
}
.right-wrap{
grid-area: rt;
background:#1ba1e2;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.