Widget:Layout

<style>

 .sub-wrapper{
   display:grid;
   grid-template-columns: 20ch auto;
   grid-template-areas: 'sidebar header'
                        'sidebar main'
                        'footer footer';
   
 }  
 
 .sub-header {
   display: grid;
   grid-template-columns: auto 3em;

}

 .sub-header {
   grid-area: header;
 }
 .sub-footer {
   grid-area: footer;
 }
 .sub-sidebar {
   grid-area: sidebar;
 }
 .main-content {
   grid-area: main;
 }
 
 .sub-wrapper{
 width:100%;

margin:0 auto; } @media (min-width: 576px){ .sub-wrapper {

   max-width: 540px;

} } @media (min-width: 768px){ .sub-wrapper{

   max-width: 720px;

} } @media (min-width: 992px){ .sub-wrapper{

   max-width: 960px;

} } @media (min-width: 1200px){ .sub-wrapper{

   max-width: 1140px;

} } </style>