Holy Grail Layout

圣杯布局

stylekitMITDashboard · dashboardProfessional · professionalLight · lightMedium · mediumBlue · blueMedium · mediumSerif · serifGeneral · general

经典的三栏式网页布局，由固定页头、三列中间区域（左侧导航、主内容、右侧边栏）和固定页脚组成，是Web设计的基础布局范式。

NNorthwind

Product · Pricing

Specimen

Make the work feel finished

One interface, dressed in this style. Compare type, color, radius, and density.

128

Active

4.8

Score

12ms

Edge

Attribution

"Holy Grail Layout" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/holy-grail-layout @ bfa7da909e86.

https://github.com/AnxForever/stylekit · api/styles/holy-grail-layout · bfa7da909e86 · © AnxForever

Do

使用 CSS Grid 或 Flexbox 实现等高三列
固定页头和页脚 sticky top-0 / sticky bottom-0
主内容区 flex-1 自适应宽度
左侧导航栏固定宽度 w-60 或 w-64
右侧边栏固定宽度 w-64 或 w-72
主内容在源码中先于侧边栏
响应式折叠侧边栏
所有按钮 active:scale-[0.98] active:translate-y-0 + focus:ring-2 focus:ring-[#3b82f6] focus:ring-offset-2

Don't

禁止三列高度不一致
禁止主内容区域过窄
禁止忽略响应式折叠
禁止侧边栏宽度随内容变化
禁止页头页脚不固定
禁止卡片大幅位移动画（阅读场景下大幅运动破坏专注）
禁止动画 duration 超过 200ms（生产力工具应当响应利落）
禁止按钮缺少 active:scale-[0.98]（无触觉确认）

Prompt

用 Holy Grail Layout 设计一个管理后台，要求：
1. 页头：logo + 搜索框 + 用户头像
2. 左侧导航：图标 + 文字菜单项
3. 主内容：数据卡片 + 表格
4. 右侧边栏：通知列表 + 快捷操作
5. 页脚：版权信息
6. 页头 sticky 固定，三列等高
7. 响应式折叠侧边栏

---
"Holy Grail Layout" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/holy-grail-layout @ bfa7da909e86.
powered by Styledex — https://styledex.dev

Tokens

DTCG

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Holy Grail Layout. \"Holy Grail Layout\" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/holy-grail-layout @ bfa7da909e86.",
  "$extensions": {
    "dev.styledex": {
      "id": "stylekit-holy-grail-layout",
      "license": "MIT",
      "attribution": "\"Holy Grail Layout\" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/holy-grail-layout @ bfa7da909e86.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#f1f5f9"
    },
    "foreground": {
      "$type": "color",
      "$value": "#1e293b"
    },
    "card": {
      "$type": "color",
      "$value": "#f1f5f9"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#1e293b"
    },
    "primary": {
      "$type": "color",
      "$value": "#1e293b"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "secondary": {
      "$type": "color",
      "$value": "#f1f5f9"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#1e293b"
    },
    "accent": {
      "$type": "color",
      "$value": "#3b82f6"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "muted": {
      "$type": "color",
      "$value": "#e3e6ea"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#6d7480"
    },
    "border": {
      "$type": "color",
      "$value": "#cfd3d6"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#1e293b"
    }
  },
  "font": {
    "sans": {
      "$type": "fontFamily",
      "$value": [
        "ui-sans-serif",
        "system-ui",
        "sans-serif"
      ]
    },
    "serif": {
      "$type": "fontFamily",
      "$value": [
        "ui-serif",
        "Georgia",
        "serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "monospace"
      ]
    }
  },
  "radius": {
    "base": {
      "$type": "dimension",
      "$value": "0.5rem"
    }
  },
  "spacing": {
    "base": {
      "$type": "dimension",
      "$value": "1rem"
    }
  },
  "shadow": {
    "base": {
      "$type": "shadow",
      "$value": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
    }
  }
}

CSS

/* powered by Styledex — https://styledex.dev */
/* "Holy Grail Layout" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/holy-grail-layout @ bfa7da909e86. */
:root {
  --background: #f1f5f9;
  --foreground: #1e293b;
  --card: #f1f5f9;
  --card-foreground: #1e293b;
  --primary: #1e293b;
  --primary-foreground: #fafaf9;
  --secondary: #f1f5f9;
  --secondary-foreground: #1e293b;
  --accent: #3b82f6;
  --accent-foreground: #fafaf9;
  --muted: #e3e6ea;
  --muted-foreground: #6d7480;
  --border: #cfd3d6;
  --destructive: #dc2626;
  --ring: #1e293b;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}

Tailwind

/* powered by Styledex — https://styledex.dev */
/* "Holy Grail Layout" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/holy-grail-layout @ bfa7da909e86. */
/** Tailwind theme extend for Holy Grail Layout (stylekit-holy-grail-layout) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#f1f5f9",
        "foreground": "#1e293b",
        "card": "#f1f5f9",
        "primary": "#1e293b",
        "primary-foreground": "#fafaf9",
        "secondary": "#f1f5f9",
        "accent": "#3b82f6",
        "muted": "#e3e6ea",
        "border": "#cfd3d6",
        "destructive": "#dc2626",
        "ring": "#1e293b"
      },
      "borderRadius": {
        "lg": "0.5rem"
      },
      "fontFamily": {
        "sans": [
          "ui-sans-serif",
          "system-ui",
          "sans-serif"
        ],
        "serif": [
          "ui-serif",
          "Georgia",
          "serif"
        ],
        "mono": [
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "monospace"
        ]
      },
      "boxShadow": {
        "styledex": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
      }
    }
  }
};

shadcn

/* powered by Styledex — https://styledex.dev */
/* "Holy Grail Layout" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/holy-grail-layout @ bfa7da909e86. */
@layer base {
:root {
  --background: #f1f5f9;
  --foreground: #1e293b;
  --card: #f1f5f9;
  --card-foreground: #1e293b;
  --primary: #1e293b;
  --primary-foreground: #fafaf9;
  --secondary: #f1f5f9;
  --secondary-foreground: #1e293b;
  --accent: #3b82f6;
  --accent-foreground: #fafaf9;
  --muted: #e3e6ea;
  --muted-foreground: #6d7480;
  --border: #cfd3d6;
  --destructive: #dc2626;
  --ring: #1e293b;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
}