CSS Grid Complete Layout Tutorial: grid-template, gap & area Naming

CSS Grid is the most powerful layout system available in CSS. Unlike Flexbox, which handles one-dimensional layouts (either a row or a column), Grid gives you full two-dimensional control over both rows and columns simultaneously. This makes it the ideal choice for page-level layouts, card grids, dashboard interfaces, and any design that requires precise placement of elements in a grid structure.

In this tutorial, we will cover every essential CSS Grid property from scratch — from basic grid setup to advanced techniques like named grid areas, responsive patterns with auto-fit, and practical real-world examples you can copy into your projects today.

Step 1: Create a Grid Container

Every CSS Grid layout starts with a container element. Apply display: grid to any element to turn it into a grid container. All direct children automatically become grid items.

.container {
  display: grid;
}

Use display: inline-grid if you want the grid to only take up as much width as its content needs, similar to inline-block.

Step 2: Define Columns with grid-template-columns

The grid-template-columns property defines the number and size of columns in your grid. You can use fixed values, percentages, fractional units (fr), or a combination.

/* Three equal columns */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

/* Same thing with repeat() */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* Sidebar + main content layout */
.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
}

/* Mixed units */
.mixed {
  display: grid;
  grid-template-columns: 200px 1fr 15%;
}

The fr unit (fractional unit) represents a fraction of the available space. 1fr 2fr means the second column is twice as wide as the first. This is the most commonly used unit in Grid because it automatically distributes space proportionally.

Step 3: Define Rows with grid-template-rows

Similarly, grid-template-rows controls the height of row tracks. In most cases, rows will auto-size to fit their content, but you can set explicit heights when needed.

/* Header row, content row (flexible), footer row */
.page {
  display: grid;
  grid-template-rows: 60px 1fr 40px;
  min-height: 100vh;
}

Step 4: Add Spacing with gap

The gap property (shorthand for row-gap and column-gap) adds consistent spacing between grid tracks without adding padding or margins to individual items.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;           /* Same gap for rows and columns */
  row-gap: 16px;       /* Override row gap */
  column-gap: 24px;    /* Override column gap */
}

Gap is one of Grid's best features. Before it existed, developers had to use negative margins or padding hacks. Now a single gap: 20px handles all spacing cleanly.

Step 5: Name Grid Areas for Intuitive Layouts

One of Grid's most powerful features is grid-template-areas. Instead of placing items by line numbers, you assign names to regions of the grid and then reference those names on child elements.

.page {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 60px 1fr 50px;
  grid-template-areas:
    "header  header  header"
    "sidebar content aside"
    "footer  footer  footer";
  gap: 10px;
  min-height: 100vh;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.aside   { grid-area: aside; }
.footer  { grid-area: footer; }

This approach creates a visual map of your layout directly in the CSS. Each quoted string represents a row, and each word represents a column. Cells with the same name merge into a single area. Use a dot (.) for empty cells.

Step 6: Responsive Grids with auto-fill and auto-fit

CSS Grid makes responsive design remarkably simple. Combined with minmax(), auto-fill, and auto-fit, you can create grids that adapt to any screen width without media queries.

/* Auto-responsive card grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

Here's how this works:

• minmax(280px, 1fr) — Each column is at least 280px wide and at most 1fr of available space.
• auto-fit — Fills the available space, collapsing empty tracks so items stretch.
• auto-fill — Creates as many tracks as can fit, keeping empty tracks as placeholders.

With auto-fit, if there's only room for one column, the single card stretches to fill the full width. With auto-fill, empty tracks remain. In most responsive grid scenarios, auto-fit is the better choice.

Step 7: Place Items Precisely

Use grid-column and grid-row on individual items to span multiple columns or rows, or to place items at specific positions.

.featured {
  grid-column: 1 / -1;   /* Span all columns */
  grid-row: 1 / 3;       /* Span first two rows */
}

.sidebar {
  grid-column: 1 / 2;    /* First column only */
}

The -1 refers to the last grid line, so 1 / -1 means "from the first line to the last line" — a convenient shorthand for spanning the full width.

Step 8: Alignment and Justification

Grid provides extensive alignment properties for positioning items within their cells and the grid within its container.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  /* Align the grid tracks within the container */
  justify-content: center;  /* Horizontal alignment of tracks */
  align-content: center;    /* Vertical alignment of tracks */
  /* Align items within their cells */
  justify-items: stretch;   /* Default: stretch to fill cell width */
  align-items: center;      /* Center items vertically */
}

/* Shorthand for centering all items */
.centered {
  place-items: center;
}

Practical Example: Dashboard Layout

Here's a complete dashboard layout using named grid areas that adapts to different screen sizes:

.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr 1fr;
  grid-template-rows: 60px 1fr 1fr 50px;
  grid-template-areas:
    "nav    nav    nav"
    "sidebar main   main"
    "sidebar chart  table"
    "footer footer  footer";
  gap: 16px;
  min-height: 100vh;
}

@media (max-width: 768px) {
  .dashboard {
    grid-template-columns: 1fr;
    grid-template-areas:
      "nav"
      "main"
      "chart"
      "table"
      "sidebar"
      "footer";
  }
}

With a single media query, the entire dashboard transforms from a multi-column layout into a single-column stack. The named areas make the responsive override intuitive — you simply restack the area names.

Common Grid Patterns Reference

• Holy Grail Layout: grid-template-columns: 200px 1fr 200px with named areas for header, sidebar, content, aside, and footer.
• Image Gallery: grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) with object-fit: cover on images.
• Masonry Layout: Use grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) and grid-row: span X for items of varying heights.
• Full-Page Grid: Set the container to height: 100vh and use grid-template-rows: auto 1fr auto for a sticky header and footer.

Frequently Asked Questions