Shell Grid

Basic Usage

Shell-grid uses CSS Grid to create a layout with four elements:

• header
• .LeftSidebar
• .Content
• .RightSidebar

<div class="Shell-grid">
  <header>Header</header>
  <aside class="LeftSidebar">Left Sidebar</aside>
  <main class="Content">Content</main>
  <aside class="RightSidebar">Right Sidebar</aside>
</div>

Optional Header and Right Sidebar

The header and RightSidebar are optional, while LeftSidebar and Content are required.

<div class="Shell-grid">
  <aside class="LeftSidebar">Left Sidebar</aside>
  <main class="Content">Content</main>
</div>

Adjusting Content and Sidebar Widths

You can modify the widths of Content, LeftSidebar, and RightSidebar using CSS variables. The default values are as follows:

:root {
  --content-width: 1fr;
  --lsb-width: auto;
  --rsb-width: auto;
}

Responsive Behaviour

Creating responsive shell layouts can be challenging, but we’ve simplified the process using Drawer and Tailwind responsive variants.

Key Steps

To create a responsive layout, you need to:

1. Add a DrawerTrigger and DrawerContent that only appear on mobile.
2. Duplicate sidebar content within DrawerContent.
3. Hide LeftSidebar on mobile.
4. Make Content full width on mobile.

There are three ways to implement this:

1. Use only Shell-grid.
2. Use Shell-simple on mobile and Shell-grid on desktop.
3. Use CSS only (not recommended).

Using Only Shell-grid

To only use Shell-grid, adjust --span for Content to span 2 columns on mobile.

<div class="Shell-grid">
  <header>
    <DrawerTrigger
      target="mobilenav"
      class="md:hidden"
      icon="tabler:menu"
    />
  </header>

  <DrawerContent id="mobilenav" class="md:hidden">
    <!-- Sidebar content goes here -->
  </DrawerContent>

  <aside class="LeftSidebar max-md:hidden">
    <!-- Sidebar content goes here -->
  </aside>

  <!-- Set Content to full-width on mobile -->
  <main class="Content [--span:2] md:[--span:1]">
    <!-- Main content goes here -->
  </main>
</div>

Using Shell-simple and Shell-grid

This approach is slightly simpler. Here, you start with Shell-simple on mobile and switch to Shell-grid on desktop with responsive variants. The key steps mentioned earlier still apply.

<!-- Use Shell-simple on mobile -->
<div class="Shell-simple md:Shell-grid">
  <header>
    <DrawerTrigger
      target="mobilenav"
      class="md:hidden"
      icon="tabler:menu"
    />
  </header>

  <DrawerContent id="mobilenav" class="md:hidden"  >
    <!-- Sidebar content goes here -->
  </DrawerContent>

  <aside class="LeftSidebar max-md:hidden">
    <!-- Sidebar content goes here -->
  </aside>

  <!-- No need add [--span] here -->
  <main class="Content">
    <!-- Main content goes here -->
  </main>
</div>

Using CSS Only

You can use media queries or container queries to handle all the steps mentioned in the key steps section.

We don’t recommend this approach as it requires more code than the other methods. Unfortunately, we can’t simplify this further because we can’t predict which breakpoint you’ll use.

<div class="Shell-grid">
  <header>
    <DrawerTrigger
      target="mobilenav"
      class="MobileNavTrigger"
      icon="tabler:menu"
    />
  </header>

  <DrawerContent id="mobilenav" class="NavMenu" >
    <!-- Sidebar content goes here -->
  </DrawerContent>

  <aside class="LeftSidebar">
    <!-- Sidebar content goes here -->
  </aside>

  <main class="Content">
    <!-- Main content goes here -->
  </main>
</div>

@media (width <= 600px) {
  .Shell-grid {
    .LeftSidebar { display: none; }
    .Content { grid-column: span 2; }
  }
}

@media (width > 600px) {
  .MobileNavTrigger,
  .MobileMenu{
    display: none
  }
}

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="LeftSidebar"> ... </aside>
  <div class="Content">
    <div class="SimpleGrid [--cols:2]">
      <main>Content</main>
      <aside class="Sticky">Sticky Sidebar</aside>
    </div>
  </div>
</div>

Here’s the CSS for Shell-grid. We wrote this with Sass.

.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(> .RightSidebar) {
    grid-template-columns:
      minmax(0, var(--lsb-width, auto))
      minmax(0, var(--content-width, 1fr))
      minmax(0, var(--rsb-width, auto));
  }

  > header,
  .Full {
    grid-column: 1 / -1;
  }

  > .LeftSidebar,
  > .RightSidebar {
    overflow: auto;
    grid-column-end: span var(--span, 1);
  }

  > .Content {
    overflow: auto;
    grid-column-end: span var(--span, 1);
    height: inherit;
  }
}

Children Elements

CSS Variables

Variables for Shell-grid

Variables for children elements