📱 App Sidebar Layout

The foundational layout for every SaaS application, admin panel, and dashboard. A fixed-width sidebar on the left, a fluid content area on the right, often with a top bar and nested inner grids.

grid-template-columns: 260px 1frgrid-template-rows: auto 1frheight: 100vhoverflow: auto

1. Full App Shell

The outer shell of a typical SaaS app. The grid has 2 columns (sidebar + content) and 2 rows (top bar + main). The sidebar and top bar are sticky; the content area scrolls.

Live Demo

⊞AppName

🔍Search...

Main

📊Dashboard

📈Analytics

👥Users

🛒Orders

📦Products

Settings

⚙️Settings

🔔Notifications

Dashboard

💰$48.2kRevenue

👤3,240Users

⭐4.87Rating

Recent Activity

New user registered

Order #1234 placed

Revenue milestone hit

CSS

.app-shell {
  display: grid;
  height: 100vh;
  grid-template-columns: 260px 1fr;
  grid-template-rows: 60px 1fr;
  grid-template-areas:
    "topbar  topbar"
    "sidebar content";
}

.topbar  { grid-area: topbar;  position: sticky; top: 0; }
.sidebar { grid-area: sidebar; overflow-y: auto; }
.content { grid-area: content; overflow-y: auto; }

💡 height: 100vh (not min-height) is key — it locks the layout to the viewport, making the sidebar and content scroll independently.

2. Collapsible Sidebar (mini vs full)

A classic pattern: sidebar collapses to icon-only mode. Since it's defined in grid-template-columns, you just change one value and the content area expands automatically.

Live Demo

Full sidebar (260px)

📊Dashboard

📈Analytics

👥Users

Content area

Mini sidebar (52px — icons only)

📊

📈

👥

Content expands to fill!

CSS

.app-shell {
  grid-template-columns: 260px 1fr; /* full */
}

.app-shell.collapsed {
  grid-template-columns: 52px 1fr; /* mini */
}

/* Content expands automatically — no extra CSS! */
/* Animate the transition: */
.app-shell {
  transition: grid-template-columns 0.25s ease;
}

💡 Animating grid-template-columns is supported in modern browsers. The content area automatically expands without needing to set its own width.

3. Right Sidebar / Contextual Panel

Some apps have a details panel on the right that opens when an item is selected. The main content shrinks to make room — all handled by changing one column definition.

Live Demo

Panel closed

Users

Alice JohnsonAdmin

Bob SmithEditor

Carol WhiteViewer

Panel open (280px)

Users

Alice Johnson

Bob Smith

Carol White

✏️ Alice Details

Email: —

Role: —

Joined: —

Last active: —

CSS

.layout {
  display: grid;
  grid-template-columns: 1fr; /* no panel */
  transition: grid-template-columns 0.2s;
}

.layout.panel-open {
  grid-template-columns: 1fr 280px; /* panel open */
}

.panel {
  overflow: hidden;
  /* panel slides in automatically */
}

💡 CSS Grid makes show/hide panels trivial — just toggle a class that changes grid-template-columns. Add a CSS transition for a smooth animation.

4. tri-Panel Layout (nav + content + details)

Some complex apps have three panels: navigation on the left, content list in the middle, and detail view on the right. This famous pattern (used by email clients like Gmail) is trivial with Grid.

Live Demo

⊞ MailApp

📥 Inbox

📤 Sent

📁 Drafts

🗑️ Trash

Q1 Report

Alice

Team standup

Bob

New features

Carol

Bug report

Dave

Q1 Report

From: Alice · May 26

CSS

/* Classic tri-panel (Gmail style) */
.mail-app {
  display: grid;
  grid-template-columns: 200px 300px 1fr;
  grid-template-rows: 60px 1fr;
  grid-template-areas:
    "topbar topbar topbar"
    "nav    list   detail";
  height: 100vh;
}

.nav    { grid-area: nav;    overflow-y: auto; }
.list   { grid-area: list;   overflow-y: auto; }
.detail { grid-area: detail; overflow-y: auto; }

💡 This pattern is used by Gmail, Outlook, Slack, VS Code, and virtually every desktop-class web app. CSS Grid makes it straightforward.