Holy grail layout in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a container with Tailwind CSS that uses Flexbox.

Tailwind

<div class="[1]">
  Content
</div>

Drag options to blanks, or click blank then click option'

Ablock

Binline

Cgrid

Dflex

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'block' or 'inline' which do not create flex containers.

Using 'grid' which is a different layout system.

The flex class in Tailwind applies display: flex; which is essential for the Holy Grail layout.

2fill in blank

medium

Complete the code to make the left sidebar fixed width and the main content flexible.

Tailwind

<div class="flex">
  <aside class="w-[1] bg-gray-200">Sidebar</aside>
  <main class="flex-1 bg-white">Main content</main>
</div>

Drag options to blanks, or click blank then click option'

Aauto

Bfull

C64

Dscreen

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'w-full' which makes the sidebar full width.

Using 'w-auto' which lets the width adjust automatically.

The class w-64 sets a fixed width of 16rem (64 * 0.25rem) for the sidebar.

3fill in blank

hard

Fix the error in the code to make the footer stick to the bottom using Tailwind.

Tailwind

<div class="flex flex-col min-h-screen">
  <header class="bg-blue-500 p-4">Header</header>
  <main class="flex-grow p-4">Content</main>
  <footer class="[1] bg-gray-800 text-white p-4">Footer</footer>
</div>

Drag options to blanks, or click blank then click option'

Astatic

Bfixed bottom-0

Csticky bottom-0

Dabsolute bottom-0

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'fixed' which overlays footer over content.

Using 'sticky' which does not work as expected in this layout.

In a flex column layout with min-h-screen, using flex-grow on the main content pushes the footer to the bottom naturally. Using static (default) on the footer keeps it in flow and at the bottom. Using sticky or fixed removes it from flow and causes layout issues.

4fill in blank

hard

Fill both blanks to create a three-column Holy Grail layout with fixed sidebars and flexible center.

Tailwind

<div class="flex min-h-screen">
  <aside class="w-[1] bg-gray-300">Left Sidebar</aside>
  <main class="flex-[2] bg-white">Main Content</main>
  <aside class="w-[1] bg-gray-300">Right Sidebar</aside>
</div>

Drag options to blanks, or click blank then click option'

A64

B1

C2

Dfull

Attempts:

3 left

💡 Hint

Common Mistakes

Using different widths for sidebars causing uneven layout.

Using flex-2 which is not standard Tailwind flex-grow.

The sidebars have fixed width w-64 and the main content uses flex-1 to fill remaining space.

5fill in blank

hard

Fill all three blanks to add header, main layout, and footer with proper Tailwind classes for Holy Grail layout.

Tailwind

<div class="flex flex-col min-h-screen">
  <header class="bg-blue-600 text-white p-4 [1]">Header</header>
  <div class="flex flex-[2]">
    <aside class="w-[3] bg-gray-200">Sidebar</aside>
    <main class="flex-1 p-4">Content</main>
  </div>
  <footer class="bg-gray-800 text-white p-4">Footer</footer>
</div>

Drag options to blanks, or click blank then click option'

Asticky top-0

B1

C64

Dfixed bottom-0

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'fixed bottom-0' on header which sticks it to bottom.

Not using flex-grow on middle container causing layout issues.

The header uses sticky top-0 to stay visible on top, the middle container flexes with flex-1, and the sidebar has fixed width w-64.

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