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.