Shell Grid

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!