Splendid Labz

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>