* { box-sizing: border-box; } h1, p { margin: 0 0 1em 0; } .wrapper { max-width: 940px; margin: 0 20px; display: grid; grid-gap: 10px; } @media screen and (min-width: 500px) { /* no grid support? */ .sidebar { float: left; width: 19.1489%; } .content { float: right; width: 79.7872%; } .wrapper { margin: 0 auto; grid-template-columns: 1fr 3fr; } .header, .footer { grid-column: 1 / -1; /* needed for the floated layout */ clear: both; } } .wrapper > * { background-color: #444; color: #fff; border-radius: 5px; padding: 20px; font-size: 150%; /* needed for the floated layout*/ margin-bottom: 10px; } /* We need to set the widths used on floated items back to auto, and remove the bottom margin as when we have grid we have gaps. */ @supports (display: grid) { .wrapper > * { width: auto; margin: 0; } } <div class="wrapper"> <header class="header">My header</header> <aside class="sidebar">Sidebar</aside> <article class="content"> <h1>2 column, header and footer</h1> <p>This <a href="https://gridbyexample.com/patterns/header-twocol-footer-responsive/">example</a> uses line-based positioning, to position the header and footer, stretching them across the grid.</p> </article> <footer class="footer">My footer</footer> </div>