Run ❯
Get your
own
website
❯
Run Code
Ctrl+Alt+R
Change Orientation
Ctrl+Alt+O
Change Theme
Ctrl+Alt+D
Go to Spaces
Ctrl+Alt+P
HTML
CSS
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css" type="text/css"> </head> <body> <div class="layout-shell"> <nav> <h2>Workspace</h2> <ul> <li><a href="#">Overview</a></li> <li><a href="#">Projects</a></li> <li><a href="#">Billing</a></li> <li><a href="#">Settings</a></li> </ul> </nav> <main> <h1>Dashboard</h1> <p>Combine a sticky sidebar with scrollable content using CSS Grid.</p> </main> </div> </body> </html>
body { margin: 0; font-family: "Inter",sans-serif; } .layout-shell { display: grid; min-height: 100vh; grid-template-columns: 280px 1fr; } .layout-shell nav { background: #0f172a; color: #fff; padding: 32px; } .layout-shell main { padding: 48px clamp(32px, 6vw, 96px); background: #f8fafc; } .layout-shell nav ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .layout-shell nav a { color: #e0e7ff; text-decoration: none; font-weight: 600; } @media (max-width: 960px) { .layout-shell { grid-template-columns: 1fr; } .layout-shell nav { position: sticky; top: 0; } }
