Grid Areas

1 min read | Tailwind CSS Tutorial

⭐

Want the full learning experience?

Get structured courses, certificates, projects, and instructor support with LabsICT Pro.

Grid template areas let you define complex layouts using a visual, named approach. Instead of counting columns and rows, you describe the layout with names — like drawing a wireframe in code.

Defining grid areas

Use arbitrary values to define a grid template with named areas.


<div class="grid grid-cols-[200px_1fr_200px] grid-rows-[60px_1fr_40px]
            [grid-template-areas:_'header_header_header'_'sidebar_main_ads'_'footer_footer_footer']
            gap-4 min-h-screen">
  <div class="[grid-area:header] bg-blue-600 text-white p-4">Header</div>
  <div class="[grid-area:sidebar] bg-gray-100 p-4">Sidebar</div>
  <div class="[grid-area:main] bg-white p-4">Main Content</div>
  <div class="[grid-area:ads] bg-gray-50 p-4">Ads</div>
  <div class="[grid-area:footer] bg-gray-800 text-white p-4">Footer</div>
</div>

Why use grid areas

Grid areas make your layout self-documenting. When you read [grid-area:header], you immediately know what that element is for. It's also easy to rearrange the layout — just change the template string, and all the areas move.

Responsive area changes

Change your layout at different breakpoints by redefining the grid template.


<div class="grid grid-cols-1 md:grid-cols-[200px_1fr]
            [grid-template-areas:_'header'_'main'_'footer' md:_'header_header'_'sidebar_main'_'footer_footer']
            gap-4 min-h-screen">
  <div class="[grid-area:header] bg-blue-600 text-white p-4">Header</div>
  <div class="[grid-area:sidebar] bg-gray-100 p-4">Sidebar</div>
  <div class="[grid-area:main] bg-white p-4">Main Content</div>
  <div class="[grid-area:footer] bg-gray-800 text-white p-4">Footer</div>
</div>

Tools & Setup