0
0
Tailwindmarkup~5 mins

Holy grail layout in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

The Holy Grail layout helps you create a webpage with a header, footer, and three columns in the middle. It keeps the main content in the center and sidebars on the sides.

When you want a webpage with a top header, bottom footer, and three columns in the middle.
When you want the center column to be wider and sidebars narrower.
When you want a layout that works well on different screen sizes.
When you want to organize content clearly with navigation on sides and main content in center.
Syntax
Tailwind
<div class="flex flex-col min-h-screen">
  <header class="bg-gray-300 p-4">Header</header>
  <main class="flex flex-1">
    <aside class="w-1/4 bg-gray-200 p-4">Left Sidebar</aside>
    <section class="flex-1 bg-white p-4">Main Content</section>
    <aside class="w-1/4 bg-gray-200 p-4">Right Sidebar</aside>
  </main>
  <footer class="bg-gray-300 p-4">Footer</footer>
</div>

Use flex and flex-col to stack header, main, and footer vertically.

Inside main, use flex to place sidebars and content horizontally.

Examples
This example uses 20% width sidebars and a blue color scheme.
Tailwind
<div class="flex flex-col min-h-screen">
  <header class="bg-blue-200 p-3">Header</header>
  <main class="flex flex-1">
    <aside class="w-1/5 bg-blue-100 p-3">Left Sidebar</aside>
    <section class="flex-1 bg-white p-3">Main Content</section>
    <aside class="w-1/5 bg-blue-100 p-3">Right Sidebar</aside>
  </main>
  <footer class="bg-blue-200 p-3">Footer</footer>
</div>
This example uses wider sidebars (33%) and more padding.
Tailwind
<div class="flex flex-col min-h-screen">
  <header class="bg-green-300 p-5">Header</header>
  <main class="flex flex-1">
    <aside class="w-1/3 bg-green-100 p-5">Left Sidebar</aside>
    <section class="flex-1 bg-white p-5">Main Content</section>
    <aside class="w-1/3 bg-green-100 p-5">Right Sidebar</aside>
  </main>
  <footer class="bg-green-300 p-5">Footer</footer>
</div>
Sample Program

This code creates a full page layout with a header on top, footer at bottom, and three columns in the middle using Tailwind CSS. The center column expands to fill space, sidebars have fixed width.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Holy Grail Layout with Tailwind</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex flex-col min-h-screen">
  <header class="bg-gray-300 p-4 text-center font-semibold">Header</header>
  <main class="flex flex-1">
    <aside class="w-1/4 bg-gray-200 p-4">Left Sidebar</aside>
    <section class="flex-1 bg-white p-4">Main Content</section>
    <aside class="w-1/4 bg-gray-200 p-4">Right Sidebar</aside>
  </main>
  <footer class="bg-gray-300 p-4 text-center">Footer</footer>
</body>
</html>
OutputSuccess
Important Notes

Use min-h-screen on the container to make the layout fill the full browser height.

Use flex-1 on the main content section to make it grow and fill available space.

Tailwind's utility classes make it easy to adjust widths and spacing quickly.

Summary

The Holy Grail layout organizes a page with header, footer, and three columns in the middle.

Use Tailwind's flexbox utilities to create this layout easily and responsively.

The center column grows while sidebars keep fixed widths.