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

Need a 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

Need a 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

Need a 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

Need a hint?

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