Shell Grid
shell-grid creates a layout with a header, left sidebar, main content area, and right sidebar. The main content expands to fill available space, and the sidebars’ width are adjustable.
Create websites with left and right sidebars easily
Just use shell-grid along with left-sidebar, content, and right-sidebar classes to create your layout.
<div class="shell-grid"> <header>Header</header> <aside class="left-sidebar">Left Sidebar</aside> <main class="content">Content</main> <aside class="right-sidebar">Right Sidebar</aside></div>Optional Header and Right Sidebar
Omit header and right-sidebar elements to create a layout with just the left-sidebar and content.
<div class="shell-grid"> <aside class="left-sidebar">Left Sidebar</aside> <main class="content">Content</main></div>Automatic Scrollbars for Content and Sidebars
left-sidebar, content, and right-sidebar containers automatically add scrollbars when their contents exceed the container height.
Easy Responsive Behaviour
Create a mobile-friendly layout using our Drawer component and Tailwind’s responsive variants.
Resize this demo to see the mobile layout in action!
Basic Usage
shell-grid uses CSS Grid to create a layout with four elements: header, left-sidebar, content, and right-sidebar.
<div class="shell-grid"> <header>Header</header> <aside class="left-sidebar">Left Sidebar</aside> <main class="content">Content</main> <aside class="right-sidebar">Right Sidebar</aside></div>Optional Header and Right Sidebar
The header and right-sidebar are optional, while left-sidebar and content are required.
<div class="shell-grid"> <aside class="left-sidebar">Left Sidebar</aside> <main class="content">Content</main></div>Adjusting Content and Sidebar Widths
You can modify the widths of content, left-sidebar, and right-sidebar using CSS variables. The default values are as follows:
:root { --content-width: 1fr; --lsb-width: auto; --rsb-width: auto;}Sticky Sidebar within Content
To create a sticky sidebar within content (like the one on this page), create a grid within content and use sticky for the sidebar.
<div class="shell-grid"> <aside class="left-sidebar"> ... </aside> <div class="content"> <div class="grid-simple [--cols:2]"> <main>Content</main> <aside class="sticky">Sticky Sidebar</aside> </div> </div></div>Please purchase a license to view this content
This content is part of our premium documentation. To access it, you'll need to have an active license for one of these products.
If you already have a license, please login to access this content.
Basic Usage
shell-grid uses CSS Grid to create a layout with four elements: header, left-sidebar, content, and right-sidebar.
<div class="shell-grid"> <header>Header</header> <aside class="left-sidebar">Left Sidebar</aside> <main class="content">Content</main> <aside class="right-sidebar">Right Sidebar</aside></div>Optional Header and Right Sidebar
The header and right-sidebar are optional, while left-sidebar and content are required.
<div class="shell-grid"> <aside class="left-sidebar">Left Sidebar</aside> <main class="content">Content</main></div>Adjusting Content and Sidebar Widths
You can modify the widths of content, left-sidebar, and right-sidebar using CSS variables. The default values are as follows:
:root { --content-width: 1fr; --lsb-width: auto; --rsb-width: auto;}Sticky Sidebar within Content
To create a sticky sidebar within content (like the one on this page), create a grid within content and use sticky for the sidebar.
<div class="shell-grid"> <aside class="left-sidebar"> ... </aside> <div class="content"> <div class="grid-simple [--cols:2]"> <main>Content</main> <aside class="sticky">Sticky Sidebar</aside> </div> </div></div>.shell-grid { display: grid; grid-template-columns: minmax(0, var(--lsb-width, auto)) minmax(0, 1fr); gap: var(--gap, 0); height: 100dvh;
&:has(> header) { grid-template-rows: auto 1fr; }
&:has(> .right-sidebar) { grid-template-columns: minmax(0, var(--lsb-width, auto)) minmax(0, var(--content-width, 1fr)) minmax(0, var(--rsb-width, auto)); }
& > :is(header, footer, .full) { grid-column: 1 / -1; }
> .left-sidebar, > .right-sidebar, > .content { overflow: auto; grid-column-end: span var(--span, 1); height: auto; }}Please purchase a license to view this content
This content is part of our premium documentation. To access it, you'll need to have an active license for one of these products.
If you already have a license, please login to access this content.
.shell-grid { display: grid; grid-template-columns: minmax(0, var(--lsb-width, auto)) minmax(0, 1fr); gap: var(--gap, 0); height: 100dvh;
&:has(> header) { grid-template-rows: auto 1fr; }
&:has(> .right-sidebar) { grid-template-columns: minmax(0, var(--lsb-width, auto)) minmax(0, var(--content-width, 1fr)) minmax(0, var(--rsb-width, auto)); }
& > :is(header, footer, .full) { grid-column: 1 / -1; }
> .left-sidebar, > .right-sidebar, > .content { overflow: auto; grid-column-end: span var(--span, 1); height: auto; }}Variables for Shell-grid
| CSS Variables | Default Value | Description |
|---|---|---|
--content-width | 1fr | Width of the content |
--lsb-width | auto | Width of the left sidebar |
--rsb-width | auto | Width of the right sidebar |
Children Elements
| Element | Description |
|---|---|
<header> | Header |
<div class="content"> | Main Content |
<aside class="left-sidebar"> | Left Sidebar |
<aside class="right-sidebar"> | Right Sidebar |
<footer> | Footer |
Please purchase a license to view this content
This content is part of our premium documentation. To access it, you'll need to have an active license for one of these products.
If you already have a license, please login to access this content.
Variables for Shell-grid
| CSS Variables | Default Value | Description |
|---|---|---|
--content-width | 1fr | Width of the content |
--lsb-width | auto | Width of the left sidebar |
--rsb-width | auto | Width of the right sidebar |
Children Elements
| Element | Description |
|---|---|
<header> | Header |
<div class="content"> | Main Content |
<aside class="left-sidebar"> | Left Sidebar |
<aside class="right-sidebar"> | Right Sidebar |
<footer> | Footer |