JSFiddle - React, Tailwind, and code Playground

HTML

<div id="Grid">
    <div class="header">asdasd</div>
    <div class="sidebar">asdasd</div>
    <div id="content">asdasd</div>
    <div class="footer">asdasd</div>
</div>

CSS

#Grid{
{  
display: -ms-grid;
-ms-grid-columns: 1fr 1fr 1fr 1fr;
    -ms-grid-rows: 1fr 1fr 1fr 1fr;
background:grey;
    ms-grid-template: "header header"
                      "sidebar content"
                       "sidebar content"                           
        "footer footer";
grid-definition-columns: auto minmax(min-content, 1fr) ; 
    grid-definition-rows: auto minmax(min-content, 1fr) auto;

/* The grid-area property places a grid item into named region (area) of the grid. */
    .header    { grid-area: header }
    .sidebar    { grid-area: sidebar }
    .content    { grid-area: content }
    .footer    { grid-area: footer }




 
        








}