Holy grail layout in Tailwind - Mini Project: Build & Apply

Holy Grail Layout with Tailwind CSS

📖 Scenario: You are building a classic web page layout called the Holy Grail Layout. This layout has a header at the top, a footer at the bottom, a main content area in the center, and two sidebars on the left and right. This layout is common for blogs, news sites, and dashboards.

🎯 Goal: Create a responsive Holy Grail layout using Tailwind CSS. The page should have a <header>, <footer>, a left sidebar, a main content area, and a right sidebar arranged horizontally in the center. The layout should use Flexbox with Tailwind utilities and be accessible with semantic HTML.

📋 What You'll Learn

Use semantic HTML5 elements:

,

,

,

Use Tailwind CSS Flexbox utilities to create the horizontal layout

Make sure the layout is responsive and stacks vertically on small screens

Add aria-labels for sidebars for accessibility

Use Tailwind spacing and background color utilities for clear visual separation

💡 Why This Matters

🌍 Real World

The Holy Grail layout is a classic web page structure used in blogs, news sites, dashboards, and many web apps to organize content clearly and accessibly.

💼 Career

Understanding how to build responsive, accessible layouts with Tailwind CSS is a valuable skill for front-end developers working on modern web projects.

1

Create the HTML skeleton with semantic elements

Write the HTML structure with a <header>, a <main> containing two <aside> elements for left and right sidebars and a <section> for main content, and a <footer>. Use the exact tags and nesting as described.

Tailwind

Hint

Use semantic tags exactly as <header>, <main>, two <aside> with aria-labels, one <section>, and <footer>.

2

Add Tailwind classes for basic layout and spacing

Add Tailwind CSS classes to the <main> element to make it a flex container with horizontal layout and spacing between children. Also add background colors and padding to <header>, <footer>, <aside>, and <section> for clear visual separation.

Tailwind

  Site Header


  
    Left Sidebar
  
  
    Main Content
  
  
    Right Sidebar
  


  Site Footer

Hint

Use flex and space-x-4 on <main>. Add background and padding classes to all main sections.

3

Make the layout responsive with stacking on small screens

Modify the <main> element classes to use Tailwind responsive utilities so that the layout stacks vertically on small screens (mobile) and is horizontal on medium screens and above. Use flex-col for small screens and md:flex-row for medium and larger.

Tailwind

  Site Header


  
    Left Sidebar
  
  
    Main Content
  
  
    Right Sidebar
  


  Site Footer

Hint

Add flex-col for small screens and md:flex-row for medium and larger screens on the <main> element.

4

Set fixed widths for sidebars and flexible main content

Add Tailwind width classes to the sidebars and main content: set both <aside> elements to w-48 (fixed width) and the <section> to flex-1 so it expands to fill available space.

Tailwind

  Site Header


  
    Left Sidebar
  
  
    Main Content
  
  
    Right Sidebar
  


  Site Footer

Hint

Add w-48 to both <aside> elements and flex-1 to the <section> element.

Practice

1. What is the main purpose of the Holy Grail layout in web design?

easy

A. To create a page with a header, footer, and three columns in the middle

B. To make a single column page with a fixed header

C. To build a grid of cards without any header or footer

D. To design a page with only a sidebar and content area

Solution

1. Step 1: Understand the layout components

   The Holy Grail layout includes a header, footer, and three columns in the middle section.

2. Step 2: Match the description to the layout

   To create a page with a header, footer, and three columns in the middle correctly describes this structure, unlike the other options which miss key parts.

3. Final Answer:

   To create a page with a header, footer, and three columns in the middle -> Option A

4. Quick Check:

   Holy Grail layout = header + footer + 3 columns [OK]

Hint: Remember: Holy Grail = header, footer, 3 columns [OK]

Common Mistakes:

• Confusing it with single column layouts
• Ignoring the footer or header parts
• Thinking it only has two columns

2. Which Tailwind CSS class combination correctly sets up a horizontal flex container for the main content area in a Holy Grail layout?

easy

A. inline-flex flex-col

B. grid grid-cols-3

C. block flex-col

D. flex flex-row

Solution

1. Step 1: Identify the layout direction

   The main content area with three columns needs a horizontal flex container, which is flex flex-row.

2. Step 2: Check other options

   grid grid-cols-3 uses grid, not flex. Options C and D use flex-col which stacks vertically, not horizontally.

3. Final Answer:

   flex flex-row -> Option D

4. Quick Check:

   Horizontal flex = flex flex-row [OK]

Hint: Use flex flex-row for horizontal layout in Tailwind [OK]

Common Mistakes:

• Using flex-col instead of flex-row
• Confusing grid with flex
• Using block which disables flex behavior

3. Given this Tailwind HTML snippet for the main content area:

<div class="flex flex-row h-screen">
  <aside class="w-48 bg-gray-200">Left</aside>
  <main class="flex-grow bg-white">Center</main>
  <aside class="w-48 bg-gray-200">Right</aside>
</div>

What will be the width behavior of the center column?

medium

A. It will grow to fill all space between fixed-width sidebars

B. It will have a fixed width of 48 units

C. It will shrink to zero width

D. It will be the same width as the sidebars

Solution

1. Step 1: Understand the flex container setup

   The container is flex-row with two sidebars fixed at width 48 (w-48).

2. Step 2: Analyze the center column class

   The center has flex-grow, so it expands to fill leftover space between sidebars.

3. Final Answer:

   It will grow to fill all space between fixed-width sidebars -> Option A

4. Quick Check:

   flex-grow center fills space [OK]

Hint: flex-grow center fills leftover space between fixed sidebars [OK]

Common Mistakes:

• Assuming center has fixed width
• Thinking center shrinks to zero
• Believing all columns have equal width

4. You wrote this Tailwind code for the Holy Grail layout main section:

<div class="flex flex-col h-screen">
  <header class="h-16 bg-blue-500">Header</header>
  <div class="flex flex-col flex-grow">
    <aside class="w-48 bg-gray-200">Left</aside>
    <main class="flex-grow bg-white">Center</main>
    <aside class="w-48 bg-gray-200">Right</aside>
  </div>
  <footer class="h-16 bg-blue-500">Footer</footer>
</div>

Why does the layout not show sidebars and center side by side?

medium

A. Because the sidebars have fixed width

B. Because the inner div uses flex-col instead of flex-row for sidebars and center

C. Because the header and footer have fixed height

D. Because the main has flex-grow

Solution

1. Step 1: Check the inner container flex direction

   The inner div uses flex flex-col, stacking children vertically.

2. Step 2: Understand sidebars and center layout

   Sidebars and center need to be side by side, so flex-row is required instead of flex-col.

3. Final Answer:

   Because the inner div uses flex-col instead of flex-row for sidebars and center -> Option B

4. Quick Check:

   Sidebars side by side need flex-row [OK]

Hint: Use flex-row for horizontal sidebars, not flex-col [OK]

Common Mistakes:

• Ignoring flex direction on inner container
• Blaming header/footer heights
• Thinking fixed widths cause stacking

5. How can you modify this Tailwind Holy Grail layout snippet to make the sidebars collapse into a top and bottom bar on small screens?

<div class="flex flex-row h-screen">
  <aside class="w-48 bg-gray-200">Left</aside>
  <main class="flex-grow bg-white">Center</main>
  <aside class="w-48 bg-gray-200">Right</aside>
</div>

hard

A. Change container to grid grid-cols-3 without media queries

B. Use hidden on sidebars for small screens

C. Add responsive classes: flex-col sm:flex-row on the container and adjust widths to heights for sidebars

D. Wrap sidebars in a flex-row container always

Solution

1. Step 1: Understand responsive flex direction

   To stack sidebars vertically on small screens, use flex-col by default and switch to flex-row on larger screens with sm:flex-row.

2. Step 2: Adjust sidebar sizing

   Sidebars need fixed height on small screens instead of fixed width, so change w-48 to h-12 or similar with responsive utilities.

3. Final Answer:

   Add responsive classes: flex-col sm:flex-row on the container and adjust widths to heights for sidebars -> Option C

4. Quick Check:

   Responsive flex direction + sizing = collapse sidebars [OK]

Hint: Use flex-col by default, sm:flex-row for wide screens [OK]

Common Mistakes:

• Not using responsive classes
• Hiding sidebars instead of stacking
• Using grid without responsiveness