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.