Holy grail layout in Tailwind - Browser Rendering Trace

Render Flow - Holy grail layout

Parse HTML structure

↓

Identify container and sections

↓

Apply Tailwind CSS classes

↓

Set display: grid on container

↓

Define grid-template-columns and grid-template-rows

↓

Place header, nav, main, aside, footer in grid areas

↓

Calculate sizes and gaps

↓

Paint grid and children

↓

Composite final layout

The browser reads the HTML, applies Tailwind CSS classes to create a grid container, defines grid areas for header, navigation, main content, sidebar, and footer, then calculates and paints the layout visually.

Render Steps - 4 Steps

Code Added:class="grid" on container

Before

[Container]
  (children stacked vertically)
  [Header]
  [Nav]
  [Main]
  [Aside]
  [Footer]

→

After

[Container: grid]
  [Header]
  [Nav]
  [Main]
  [Aside]
  [Footer]

The container becomes a grid, but no columns or rows defined yet, so children still stack.

🔧 Browser Action:Creates grid formatting context

Code Sample

A grid layout with header on top, navigation on left, main content center, sidebar right, and footer at bottom, spaced with gaps and full viewport height.

Tailwind

<div class="grid grid-rows-[auto_1fr_auto] grid-cols-[200px_1fr_200px] min-h-screen gap-4">
  <header class="bg-blue-500 text-white p-4 col-span-3">Header</header>
  <nav class="bg-green-300 p-4">Navigation</nav>
  <main class="bg-white p-4">Main Content</main>
  <aside class="bg-yellow-300 p-4">Sidebar</aside>
  <footer class="bg-gray-700 text-white p-4 col-span-3">Footer</footer>
</div>

Render Quiz - 3 Questions

After applying step 2, how are the grid columns sized?

A Left and right columns fixed 200px, center column flexible

B All columns have equal width

C Columns stack vertically

D Only one column visible

Common Confusions - 3 Topics

Why do grid items stack vertically before defining columns and rows?

Without grid-template-columns and grid-template-rows, the grid container has no defined tracks, so items behave like block elements stacking vertically (see render_step 1 and 2).

💡 Always define grid-template-columns and rows to see grid layout.

Why doesn't the grid container fill the full screen height initially?

By default, the container height fits its content. Adding min-h-screen sets minimum height to viewport height, making the layout fill the screen (see render_step 3).

💡 Use min-h-screen or height utilities to control container height.

Why are gaps between grid items not visible without gap property?

Grid items touch each other by default. The gap property adds consistent spacing between cells (see render_step 3).

💡 Add gap to create space between grid areas.

Property Reference

Property	Value Applied	Axis/Direction	Visual Effect	Common Use
display	grid	both	Creates grid container for layout	Defines grid context
grid-template-columns	200px 1fr 200px	horizontal	Sets three columns: fixed, flexible, fixed	Defines column widths
grid-template-rows	auto 1fr auto	vertical	Sets three rows: header/footer auto height, middle row flexible	Defines row heights
gap	1rem	both	Adds space between grid cells	Separates grid items visually
min-height	100vh	vertical	Makes container fill full viewport height	Full page layout height

Concept Snapshot

Holy grail layout uses CSS Grid with three rows and three columns. Columns: fixed sidebar, flexible main, fixed sidebar. Rows: header auto height, flexible middle, footer auto height. Use gap to add spacing between areas. min-h-screen makes layout fill full viewport height. Tailwind classes simplify grid and spacing setup.