🗺️ Lesson 7: Grid Template Areas

What are Grid Template Areas?

Grid template areas let you name sections of your grid and place items by name. It's incredibly visual - the CSS literally looks like your layout! In JavaScript, you use gridTemplateAreas and gridArea.

Basic Grid Template Areas

Classic dashboard layout with named areas:

const container = document.getElementById('dashboard');

// Define the layout
container.style.display = 'grid';
container.style.gridTemplateColumns = '200px 1fr';
container.style.gridTemplateRows = '60px 1fr 40px';
container.style.gridTemplateAreas = `
  "header header"
  "sidebar main"
  "footer footer"
`;

// Assign elements to areas
document.getElementById('header').style.gridArea = 'header';
document.getElementById('sidebar').style.gridArea = 'sidebar';
document.getElementById('main').style.gridArea = 'main';
document.getElementById('footer').style.gridArea = 'footer';

The layout string shows your structure visually! Each row is in quotes, separated by spaces or newlines.

Holy Grail Layout

Classic three-column layout:

container.style.gridTemplateAreas = `
  "header header header"
  "nav content aside"
  "footer footer footer"
`;

container.style.gridTemplateColumns = '200px 1fr 200px';
container.style.gridTemplateRows = 'auto 1fr auto';

document.getElementById('header').style.gridArea = 'header';
document.getElementById('nav').style.gridArea = 'nav';
document.getElementById('content').style.gridArea = 'content';
document.getElementById('aside').style.gridArea = 'aside';
document.getElementById('footer').style.gridArea = 'footer';

Dynamic Layout Switching

Change entire layouts with one property change:

const layouts = {
  desktop: `
    "header header header"
    "sidebar main aside"
    "footer footer footer"
  `,
  tablet: `
    "header header"
    "sidebar main"
    "footer footer"
  `,
  mobile: `
    "header"
    "main"
    "sidebar"
    "footer"
  `
};

function setLayout(layout) {
  const container = document.getElementById('app');
  
  if (layout === 'desktop') {
    container.style.gridTemplateColumns = '200px 1fr 200px';
    container.style.gridTemplateAreas = layouts.desktop;
  } else if (layout === 'tablet') {
    container.style.gridTemplateColumns = '200px 1fr';
    container.style.gridTemplateAreas = layouts.tablet;
  } else {
    container.style.gridTemplateColumns = '1fr';
    container.style.gridTemplateAreas = layouts.mobile;
  }
}

// Responsive
if (window.innerWidth > 1024) {
  setLayout('desktop');
} else if (window.innerWidth > 640) {
  setLayout('tablet');
} else {
  setLayout('mobile');
}

Empty Cells with Dots

Use dots (.) for empty cells:

container.style.gridTemplateAreas = `
  "logo . . search"
  "nav nav nav nav"
  "main main . sidebar"
`;

// logo, search, nav, main, and sidebar get placed
// Cells with dots stay empty

React Component with Grid Areas

Build flexible layouts in React:

function AppLayout({ layout = 'desktop' }) {
  const areas = {
    desktop: '"header header" "sidebar main" "footer footer"',
    mobile: '"header" "main" "sidebar" "footer"'
  };
  
  const columns = {
    desktop: '250px 1fr',
    mobile: '1fr'
  };
  
  return (
    

      
Header
      
      
Main Content
      
    
  );
}

Form Layout with Areas

Semantic form structure:

const form = document.getElementById('signup-form');

form.style.display = 'grid';
form.style.gridTemplateColumns = '1fr 1fr';
form.style.gap = '1rem';
form.style.gridTemplateAreas = `
  "heading heading"
  "firstName lastName"
  "email email"
  "password password"
  "submit submit"
`;

document.getElementById('heading').style.gridArea = 'heading';
document.getElementById('firstName').style.gridArea = 'firstName';
document.getElementById('lastName').style.gridArea = 'lastName';
document.getElementById('email').style.gridArea = 'email';
document.getElementById('password').style.gridArea = 'password';
document.getElementById('submit').style.gridArea = 'submit';

Magazine Layout

Complex editorial layout with featured content:

container.style.gridTemplateAreas = `
  "feature feature feature"
  "feature feature feature"
  "story1 story2 story3"
  "ads ads ads"
`;

container.style.gridTemplateColumns = 'repeat(3, 1fr)';
container.style.gridTemplateRows = 'repeat(4, auto)';
container.style.gap = '1rem';

document.getElementById('feature').style.gridArea = 'feature';
document.getElementById('story1').style.gridArea = 'story1';
document.getElementById('story2').style.gridArea = 'story2';
document.getElementById('story3').style.gridArea = 'story3';
document.getElementById('ads').style.gridArea = 'ads';

Animating Layout Changes

container.style.transition = 'all 0.3s ease';

// Now layout changes animate!
setLayout('mobile');