Component
Holy Grail Layout Grid
Holy Grail Layout Grid with responsive design.
- Component
- Vanilla
- HTML
- MIT
Preview
Live component
No interactive preview for this component.
Install it with the CLI below, or read the implementation on this page.
Install
Add to your project
npx devsnips add Vanilla/Components/Other/holy-grail-layout-grid Vanilla/Components/Other/holy-grail-layout-grid <!-- Snippet Name: Holy Grail Layout | Use Case: A classic layout with a header, footer, main content, and two sidebars | Description: Implemented using CSS Grid, this layout is responsive and adapts to different screen sizes. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Holy Grail Layout</title>
<style>
body {
font-family: var(--ds-font-sans, Arial, sans-serif);
margin: 0;
line-height: 1.6;
text-align: center;
}
.container {
display: grid;
grid-template-areas:
'header header header'
'nav content aside'
'footer footer footer';
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
header {
grid-area: header;
background-color: var(--ds-foreground, #333);
color: white;
padding: 1rem;
}
nav {
grid-area: nav;
background-color: var(--ds-border, #ddd);
padding: 1rem;
}
main {
grid-area: content;
background-color: var(--ds-surface-2, #f4f4f4);
padding: 1rem;
}
aside {
grid-area: aside;
background-color: var(--ds-border, #ddd);
padding: 1rem;
}
footer {
grid-area: footer;
background-color: var(--ds-foreground, #333);
color: white;
padding: 1rem;
}
/* Responsive layout for smaller screens */
@media (max-width: 768px) {
.container {
grid-template-areas:
'header'
'nav'
'content'
'aside'
'footer';
grid-template-columns: 1fr;
grid-template-rows: auto;
}
}
/* devsnips-qa:quality-bar */
:focus-visible{outline:2px solid var(--ds-accent, #2563eb);outline-offset:2px;}
/* DevSnips design tokens (Swiss) — edit tokens.css to re-theme */
:root{
--ds-bg:#fff;--ds-surface:#fff;--ds-surface-2:#f7f7f7;--ds-surface-3:#ededed;--ds-foreground:#0a0a0a;--ds-muted:#525252;--ds-subtle:#a3a3a3;--ds-border:#e5e5e5;--ds-border-strong:#d4d4d4;--ds-accent:#2563eb;--ds-accent-hover:#1d4ed8;--ds-accent-fg:#fff;--ds-accent-soft:#eff6ff;--ds-success:#16a34a;--ds-success-soft:#f0fdf4;--ds-warning:#d97706;--ds-warning-soft:#fffbeb;--ds-danger:#dc2626;--ds-danger-soft:#fef2f2;--ds-info:#2563eb;--ds-info-soft:#eff6ff;--ds-font-sans:system-ui,-apple-system,'Segoe UI',Roboto,Inter,'Helvetica Neue',Arial,sans-serif;--ds-font-mono:ui-monospace,'SF Mono','JetBrains Mono',Menlo,Consolas,monospace;--ds-text-xs:.75rem;--ds-text-sm:.875rem;--ds-text-base:1rem;--ds-text-lg:1.125rem;--ds-text-xl:1.25rem;--ds-text-2xl:1.5rem;--ds-text-3xl:1.875rem;--ds-text-4xl:2.25rem;--ds-leading-tight:1.25;--ds-leading-normal:1.5;--ds-leading-relaxed:1.625;--ds-weight-normal:400;--ds-weight-medium:500;--ds-weight-semibold:600;--ds-weight-bold:700;--ds-space-0:0;--ds-space-px:1px;--ds-space-1:.25rem;--ds-space-2:.5rem;--ds-space-3:.75rem;--ds-space-4:1rem;--ds-space-5:1.25rem;--ds-space-6:1.5rem;--ds-space-8:2rem;--ds-space-10:2.5rem;--ds-space-12:3rem;--ds-space-16:4rem;--ds-radius-sm:.25rem;--ds-radius-md:.5rem;--ds-radius-lg:.75rem;--ds-radius-xl:1rem;--ds-radius-2xl:1.5rem;--ds-radius-full:9999px;--ds-shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);--ds-shadow-md:0 4px 6px -1px rgba(0,0,0,.08),0 2px 4px -2px rgba(0,0,0,.05);--ds-shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.05);--ds-duration-fast:120ms;--ds-duration-normal:200ms;--ds-duration-slow:300ms;--ds-ease-out:cubic-bezier(.16,1,.3,1);--ds-ease-in-out:cubic-bezier(.4,0,.2,1);--ds-ring:0 0 0 2px #2563eb;--ds-container:1200px;--ds-gutter:1rem;
}
@media (prefers-color-scheme: dark){:root{--ds-bg:#0a0a0a;--ds-surface:#111;--ds-surface-2:#171717;--ds-surface-3:#1f1f1f;--ds-foreground:#fafafa;--ds-muted:#a3a3a3;--ds-subtle:#737373;--ds-border:#262626;--ds-border-strong:#404040;--ds-accent:#3b82f6;--ds-accent-hover:#60a5fa;--ds-accent-fg:#fff;--ds-accent-soft:#172554;--ds-success:#22c55e;--ds-success-soft:#052e16;--ds-warning:#f59e0b;--ds-warning-soft:#422006;--ds-danger:#ef4444;--ds-danger-soft:#450a0a;--ds-info:#3b82f6;--ds-info-soft:#172554;--ds-ring:0 0 0 2px #3b82f6;}}
</style>
</head>
<body>
<div class="container">
<header>Header</header>
<nav>Navigation</nav>
<main>Main Content</main>
<aside>Sidebar</aside>
<footer>Footer</footer>
</div>
</body>
</html># Holy Grail Layout Grid
Holy Grail Layout Grid with responsive design.
**Technology:** vanilla
**Category:** components
**Subcategory:** other
**Tags:** grid, layout, responsive, center, navbar, sidebar, table, typography
**Responsive:** Yes 95 lines UTF-8 · LF · Spaces: 2
Continue browsing