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 is 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 (
    <div style={{
      display: 'grid',
      gridTemplateAreas: areas[layout],
      gridTemplateColumns: columns[layout],
      gridTemplateRows: 'auto 1fr auto',
      minHeight: '100vh'
    }}>
      <header style={{ gridArea: 'header' }}>Header</header>
      <aside style={{ gridArea: 'sidebar' }}>Sidebar</aside>
      <main style={{ gridArea: 'main' }}>Main Content</main>
      <footer style={{ gridArea: 'footer' }}>Footer</footer>
    </div>
  );
}

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');