CSS Grid Template Areas

Learn how to create semantic layouts with CSS Grid Template Areas

What are CSS Grid Template Areas?

CSS Grid Template Areas are a powerful feature that allows you to define named grid areas and place items within those areas. This creates a semantic connection between your HTML structure and visual layout, making your code more maintainable and understandable.

Key Grid Template Area Concepts:

  • grid-template-areas - Defines named grid areas in the container
  • grid-area - Assigns items to specific named areas
  • Dots (.) - Represent empty cells in the grid
  • Responsive layouts - Easily change layout at different breakpoints
  • Semantic naming - Use meaningful names for layout areas
  • Overlapping areas - Create interesting layouts with overlapping items
Header
Sidebar
Content
Footer

CSS Grid Template Areas Properties Reference

PropertyDescriptionValues
grid-template-areasDefines named grid areasarea names, dots (.) for empty cells
grid-areaAssigns an item to a named areaarea name, row-start/column-start/row-end/column-end
grid-row-startSpecifies where the item starts along the row axisline number, span n, area name
grid-row-endSpecifies where the item ends along the row axisline number, span n, area name
grid-column-startSpecifies where the item starts along the column axisline number, span n, area name
grid-column-endSpecifies where the item ends along the column axisline number, span n, area name
grid-rowShorthand for grid-row-start and grid-row-endstart-line / end-line, start-line / span n
grid-columnShorthand for grid-column-start and grid-column-endstart-line / end-line, start-line / span n

CSS Grid Template Areas in Action

Example Code

/* CSS Grid Template Areas */

/* Basic grid with template areas */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: 80px 1fr 80px;
  grid-template-areas: 
    "header header header"
    "sidebar content ads"
    "footer footer footer";
  gap: 15px;
  height: 100vh;
}

/* Assigning items to areas */
.header {
  grid-area: header;
  background-color: #e74c3c;
}

.sidebar {
  grid-area: sidebar;
  background-color: #2ecc71;
}

.content {
  grid-area: content;
  background-color: #3498db;
}

.ads {
  grid-area: ads;
  background-color: #f39c12;
}

.footer {
  grid-area: footer;
  background-color: #9b59b6;
}

/* Responsive grid areas */
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: 60px auto auto auto 60px;
    grid-template-areas: 
      "header"
      "sidebar"
      "content"
      "ads"
      "footer";
  }
}

/* Empty cells with dots */
.grid-with-empty-cells {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  grid-template-areas: 
    "header header header"
    "sidebar . content"
    "footer footer footer";
  gap: 10px;
}

/* Overlapping areas */
.grid-overlap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 100px);
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
  gap: 10px;
}

.overlap-item {
  grid-area: main;
  background-color: #3498db;
  z-index: 1;
}

.overlap-sidebar {
  grid-area: sidebar;
  background-color: #e74c3c;
  z-index: 2;
  margin-left: -50px;
}

/* Using minmax with grid areas */
.grid-minmax {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 3fr minmax(150px, 1fr);
  grid-template-rows: minmax(60px, auto) 1fr minmax(60px, auto);
  grid-template-areas: 
    "header header header"
    "sidebar content ads"
    "footer footer footer";
  gap: 15px;
}

/* Grid areas with auto placement */
.grid-auto-placement {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  grid-template-areas: 
    "header header header"
    "sidebar content ads";
  gap: 10px;
  grid-auto-rows: 100px;
}

/* Named lines with grid areas */
.grid-named-lines {
  display: grid;
  grid-template-columns: [sidebar-start] 1fr [content-start] 2fr [ads-start] 1fr [end];
  grid-template-rows: [header-start] 80px [content-start] 1fr [footer-start] 80px [end];
  grid-template-areas: 
    "header header header"
    "sidebar content ads"
    "footer footer footer";
  gap: 15px;
}

/* Dense grid packing */
.grid-dense {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 100px);
  grid-template-areas: 
    "header header header header"
    "sidebar content content ads"
    "footer footer footer footer";
  gap: 10px;
  grid-auto-flow: dense;
}

/* Nested grid areas */
.grid-nested {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 100px 1fr 100px;
  grid-template-areas: 
    "header header"
    "sidebar content"
    "footer footer";
  gap: 15px;
}

.nested-grid {
  grid-area: content;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: 
    "nested-header nested-header"
    "nested-content nested-sidebar";
  gap: 10px;
  padding: 15px;
  background-color: #f8f9fa;
}

.nested-header {
  grid-area: nested-header;
  background-color: #3498db;
}

.nested-content {
  grid-area: nested-content;
  background-color: #2ecc71;
}

.nested-sidebar {
  grid-area: nested-sidebar;
  background-color: #e74c3c;
}

/* Using CSS variables with grid areas */
:root {
  --header-height: 80px;
  --footer-height: 80px;
  --sidebar-width: 250px;
  --ads-width: 200px;
  --grid-gap: 15px;
}

.grid-with-vars {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr var(--ads-width);
  grid-template-rows: var(--header-height) 1fr var(--footer-height);
  grid-template-areas: 
    "header header header"
    "sidebar content ads"
    "footer footer footer";
  gap: var(--grid-gap);
}

/* Animation with grid areas */
.grid-animated {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: 80px 1fr 80px;
  grid-template-areas: 
    "header header header"
    "sidebar content ads"
    "footer footer footer";
  gap: 15px;
  transition: all 0.3s ease;
}

.grid-animated:hover {
  grid-template-columns: 1fr 4fr 1fr;
}

/* Aspect ratio areas */
.grid-aspect-ratio {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 1fr;
  grid-template-areas: "sidebar content";
  gap: 15px;
  aspect-ratio: 16 / 9;
}

/* Full-bleed layout with grid areas */
.full-bleed {
  display: grid;
  grid-template-columns: 
    [full-start] minmax(1rem, 1fr)
    [main-start] minmax(0, 1200px) [main-end]
    minmax(1rem, 1fr) [full-end];
  grid-template-rows: auto 1fr auto;
  grid-template-areas: 
    "header header header"
    ". main ."
    "footer footer footer";
}

.full-bleed-header {
  grid-area: header;
  background-color: #e74c3c;
}

.full-bleed-main {
  grid-area: main;
  background-color: #3498db;
}

.full-bleed-footer {
  grid-area: footer;
  background-color: #2ecc71;
}

Grid Template Area Techniques

Basic Template Areas

Create semantic layouts with named areas.

Header
Sidebar
Content

Empty Cells

Use dots to represent empty cells in the grid.

Header
Sidebar
Content
Footer

Responsive Areas

Change layout structure at different breakpoints.

Header
Sidebar
Content
Ads

Nested Grids

Grid areas that contain other grids.

Nested Header
Nested Content
Nested Sidebar

Best Practices for Grid Template Areas

Effective Usage

  • Use semantic, meaningful names for grid areas
  • Keep area names consistent across breakpoints
  • Use dots for empty cells to maintain grid structure
  • Combine with CSS variables for maintainable code
  • Use responsive grid areas for adaptive layouts
  • Consider using full-bleed layouts for modern designs

Common Mistakes to Avoid

  • Using non-semantic or confusing area names
  • Forgetting to update all breakpoints when changing areas
  • Creating overly complex grid area patterns
  • Not using empty cells (dots) where needed
  • Ignoring responsive considerations
  • Not testing with real content

Browser Support & Accessibility

  • CSS Grid Template Areas are supported in all modern browsers
  • Use feature queries (@supports) for progressive enhancement
  • Ensure proper reading order for screen readers
  • Test with various content lengths to ensure layout stability
  • Consider using ARIA landmarks for important layout regions
  • Test keyboard navigation through grid items

Ready to Try It Yourself?

Experiment with CSS Grid Template Areas in our interactive editor. See your changes in real-time and build your understanding through practice.

< PreviousNext >