Holy grail layout in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ layout

intermediate

Identify the correct Tailwind CSS grid setup for a Holy Grail layout

Which Tailwind CSS class setup creates a 3-column Holy Grail layout with a fixed width sidebar on the left and right, and a flexible center content area?

A flex flex-row justify-between

B grid grid-cols-3

C grid grid-cols-[1fr_200px_1fr]

D grid grid-cols-[200px_1fr_200px]

💡 Hint

Think about how to fix the sidebars width and let the center grow.

The class grid grid-cols-[200px_1fr_200px] sets a grid with three columns where the side columns are fixed at 200px and the center column takes the remaining space. This matches the Holy Grail layout structure.

Option D creates three equal columns, not fixed sidebars.

Option D uses flexbox but does not fix sidebar widths.

Option D fixes the middle column, not the sidebars.

❓ selector

intermediate

Which Tailwind utility applies a sticky header in Holy Grail layout?

In a Holy Grail layout, which Tailwind CSS class makes the header stick to the top of the viewport when scrolling?

A sticky top-0 z-10

B fixed bottom-0

C absolute top-0

D relative z-0

💡 Hint

Sticky means it stays visible at the top but scrolls away if parent scrolls out.

The class sticky top-0 z-10 makes the element stick to the top of the viewport with a higher stacking order.

Option A fixes the element at the bottom, not top.

Option A positions absolutely but does not stick on scroll.

Option A is default positioning with no stickiness.

🧠 Conceptual

advanced

Why is using CSS Grid preferred over Flexbox for Holy Grail layout?

Which reason best explains why CSS Grid is preferred over Flexbox for implementing the Holy Grail layout?

A Flexbox cannot create any multi-column layouts.

B Grid is supported only in modern browsers, so it is safer to use.

C Grid allows defining rows and columns simultaneously, enabling precise 2D layout control.

D Flexbox automatically fixes sidebar widths without extra classes.

💡 Hint

Think about controlling both horizontal and vertical placement.

CSS Grid lets you define both rows and columns, which is perfect for the Holy Grail layout's 3-column and multiple-row structure.

Flexbox is mainly for 1D layouts (row or column), so it is less precise for this.

Option C is incorrect because Flexbox does not fix widths automatically.

Option C is false; Grid is widely supported.

Option C is false; Flexbox can create multi-column layouts but less efficiently.

❓ rendering

advanced

What is the visual result of this Tailwind Holy Grail layout code?

Given this HTML snippet with Tailwind classes, what will the user see in the browser?

Tailwind

<div class="grid grid-cols-[150px_1fr_150px] min-h-screen">
  <nav class="bg-blue-500">Left Sidebar</nav>
  <main class="bg-white">Main Content</main>
  <aside class="bg-green-500">Right Sidebar</aside>
</div>

A Three equal width columns with blue, white, and green backgrounds.

B A full height page with a blue left sidebar 150px wide, white main content filling center, and green right sidebar 150px wide.

C A vertical stack of blue, white, and green sections.

D Only the main content is visible; sidebars are hidden.

💡 Hint

Look at the grid column sizes and background colors.

The grid columns are set to 150px fixed width for sidebars and flexible center. The sidebars have distinct background colors, so they appear on left and right with fixed width, and main content fills center.

Option B is wrong because columns are not equal width.

Option B is wrong because grid creates columns, not vertical stack.

Option B is wrong because sidebars are visible.

❓ accessibility

expert

Which ARIA roles and landmarks best improve accessibility in a Holy Grail layout?

To make a Holy Grail layout accessible, which combination of semantic HTML5 elements and ARIA roles is best practice?

A <header role="banner">, <nav role="navigation">, <main role="main">, <aside role="complementary">, <footer role="contentinfo">

B <div role="banner">, <div role="navigation">, <div role="main">, <div role="complementary">, <div role="contentinfo">

C <section role="banner">, <section role="navigation">, <section role="main">, <section role="complementary">, <section role="contentinfo">

D <article role="banner">, <article role="navigation">, <article role="main">, <article role="complementary">, <article role="contentinfo">

💡 Hint

Use semantic elements first, then add ARIA roles if needed.

Using semantic elements like <header>, <nav>, <main>, <aside>, and <footer> with their respective ARIA roles improves screen reader navigation.

Option A uses generic div elements which are less semantic.

Options C and D use less appropriate elements for these roles.

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