Skip to content

Instantly share code, notes, and snippets.

@crazy4groovy
Created December 13, 2023 17:10
Show Gist options
  • Save crazy4groovy/b80c070e2da4154db217a92e83b2c71b to your computer and use it in GitHub Desktop.
Save crazy4groovy/b80c070e2da4154db217a92e83b2c71b to your computer and use it in GitHub Desktop.
CSS grid page layout "holy grail" for optional header, footer, sidebar; required content is scrollable (CSS)
body, .grid-wrapper {
height: 100vh;
padding: 0;
margin: 0;
}
.grid-wrapper {
display: grid;
grid-template-columns: minmax(0, 200px) minmax(80vw, 1fr);
grid-template-rows: auto 1fr auto;
grid-template-areas:
"sidebar header"
"sidebar content"
"sidebar footer";
gap: 4px;
}
.grid-wrapper:not(:has(.sidebar)) {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"content"
"footer";
}
.grid-wrapper > * {
padding: 5px;
border-radius: 5px;
}
.header {
grid-area: header;
background-color: lightblue;
}
.content {
grid-area: content;
overflow: auto;
font-size: 2rem;
background-color: pink;
}
.sidebar {
grid-area: sidebar;
background-color: violet;
}
.footer {
grid-area: footer;
background-color: lightgreen;
}
<div class="grid-wrapper">
<header class="header">Header</header>
<main class="content">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nemo eligendi blanditiis dolor. Eaque nobis ex exercitationem laudantium tempora fugiat voluptates quos facilis ullam, officiis dignissimos facere doloremque? Aliquam, ducimus nostrum?<br />
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorem laboriosam, et odit aliquid tenetur in. Molestiae quaerat nihil quod repudiandae debitis numquam deleniti ex. Quo est error impedit architecto odio.<br />
Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse enim quisquam voluptate commodi eaque fugiat molestias natus, sunt molestiae neque recusandae, dolores, totam minus modi eveniet inventore est. Expedita, excepturi!<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur quaerat hic suscipit nihil ipsa numquam blanditiis sequi dolores expedita! Enim et nulla dolores quod illum inventore quas, asperiores temporibus dignissimos?<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur quaerat hic suscipit nihil ipsa numquam blanditiis sequi dolores expedita! Enim et nulla dolores quod illum inventore quas, asperiores temporibus dignissimos?<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur quaerat hic suscipit nihil ipsa numquam blanditiis sequi dolores expedita! Enim et nulla dolores quod illum inventore quas, asperiores temporibus dignissimos?<br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur quaerat hic suscipit nihil ipsa numquam blanditiis sequi dolores expedita! Enim et nulla dolores quod illum inventore quas, asperiores temporibus dignissimos?
</main>
<aside class="sidebar">Sidebar</aside>
<footer class="footer">Footer</footer>
</div>
@crazy4groovy
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment