My header
2 column, header and footer
*, *:before, *:after { box-sizing: border-box; } body {margin: 40px; font-family: 'Open Sans', 'sans-serif'; background-color: #fff; color: #444;} .wrapper {max-width: 940px; margin: 0 20px; display: grid; grid-gap: 10px;} .wrapper > * {background-color: #444; color: #fff; border-radius: 5px; padding: 20px; font-size: 150%;} h1, p {margin: 0 0 1em 0;} @media screen and (min-width: 500px) { .wrapper {margin: 0 auto; grid-template-columns: 1fr 3fr;} .header, .footer {grid-column: 1 / -1;} }
<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> </article> <footer class="footer">My footer</footer> </div>