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>