<header>Some content inside the header</header>
<aside>A sidebar here</aside>
<main> Caramels cotton candy candy jelly-o macaroon soufflé dragée shortbread toffee. Halvah pastry donut lemon drops shortbread. Danish dragée powder dragée dessert pudding dessert muffin. Marzipan bear claw brownie jujubes powder. Lollipop sesame snaps cake icing apple pie jelly-o chocolate bar pastry brownie. Gummies jelly beans sesame snaps donut candy bear claw chocolate bar icing. Danish jelly beans pudding danish carrot cake cupcake. Chupa chups lemon drops chocolate jelly beans marshmallow topping marzipan. Cake biscuit bear claw cotton candy oat cake bear claw. Jelly candy marzipan cake jelly beans marshmallow fruitcake ice cream. Candy canes jelly beans bear claw soufflé bonbon muffin sesame snaps tootsie roll. Croissant cheesecake shortbread apple pie sweet brownie. Jelly fruitcake danish candy chocolate cake sweet roll. Apple pie tart cheesecake cake croissant halvah sweet roll carrot cake gummi bears.</main>
<footer>Some content inside the footer</footer>
html {
display: grid;
height: 100%;
}
body {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 0;
gap: 8px;
font-size: 1.2em;
}
body:has(main + aside) {
grid-template-columns: 1fr 200px;
}
body:has(aside + main) {
grid-template-columns: 200px 1fr;
}
header {
grid-column: 1/-1;
background: red;
padding: 1em;
}
main {
background: lightblue;
padding: 1em;
overflow: auto;
}
aside {
background: orange;
padding: 1em;
}
footer {
grid-column: 1/-1;
background: green;
padding: 1em;
}
/* a small fallback in case has is not supported */
@supports not selector(:has(*)) {
body {
grid-template-columns: auto 1fr auto;
}
aside {
width: 200px;
}
main {
grid-column: span 2;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.