CSS Grid Cheatsheet for Interviews — Template Areas, fr Units, and Responsive Layouts

A CSS Grid cheatsheet for interviews should do more than list properties. Interviewers want to know whether you can reason about two-dimensional layout, template areas, fr units, responsive grids, alignment, and the difference between Grid and Flexbox. The best answers are practical: you can sketch the layout, explain why Grid fits, and write enough CSS to make it work without fragile hacks.

Use this guide to review the properties, patterns, and traps that come up in frontend interviews.

What CSS Grid is best at

CSS Grid is a two-dimensional layout system. It controls rows and columns at the same time, which makes it ideal for page shells, dashboards, card grids, photo galleries, form layouts, calendars, and any design where horizontal and vertical placement both matter.

Flexbox is usually better for one-dimensional distribution: nav items, button groups, chips, toolbars, and content that flows in a row or column. In interviews, a strong answer is not “Grid is newer.” It is:

“I use Grid when the layout has rows and columns that should align together. I use Flexbox when the layout is primarily one direction and content size should drive distribution.”

That distinction solves half of CSS layout interview questions.

Core CSS Grid properties

| Property | Applies to | What it does | |---|---|---| | display: grid | Container | Creates a grid formatting context | | grid-template-columns | Container | Defines explicit columns | | grid-template-rows | Container | Defines explicit rows | | gap | Container | Sets gutters between tracks | | grid-template-areas | Container | Names layout regions | | grid-column | Item | Places item across column lines | | grid-row | Item | Places item across row lines | | place-items | Container | Shorthand for item alignment inside cells | | place-content | Container | Aligns the whole grid within available space | | grid-auto-flow | Container | Controls placement of implicit items |

A minimal grid:

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

This creates three equal columns with a consistent gap. It is interview-safe because it is clear and maintainable.

fr units explained

The fr unit represents a fraction of available free space in the grid container. It is not the same as a percentage. Percentages calculate against the container and can collide with gaps. fr distributes leftover space after fixed tracks, intrinsic sizes, and gaps are accounted for.

Example:

.layout {
  display: grid;
  grid-template-columns: 240px 1fr 2fr;
  gap: 24px;
}

The first column is fixed at 240px. After subtracting that and the gaps, the remaining space is split into three fractions: one fraction for the middle column and two for the main column.

Interview answer:

“fr is useful because it lets fixed and flexible tracks coexist. I can reserve a fixed sidebar and divide the remaining space predictably without manually calculating percentages and gaps.”

Important nuance: 1fr can still overflow if the content has a large intrinsic minimum. A common fix is minmax(0, 1fr).

.app {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
}

That tells the main column it may shrink below its content’s automatic minimum, which prevents mysterious horizontal overflow in dashboards and app shells.

Template areas for readable layouts

grid-template-areas gives names to regions. It is excellent for interview explanations because it maps directly to a visual layout.

.page {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "sidebar header"
    "sidebar main"
    "sidebar footer";
  min-height: 100vh;
  gap: 16px;
}

.sidebar { grid-area: sidebar; }
.header { grid-area: header; }
.main { grid-area: main; }
.footer { grid-area: footer; }

The rule: every string must have the same number of cells, and each named area must form a rectangle. You cannot create an L-shaped area with one name.

For responsive layouts, redefine the template:

@media (max-width: 760px) {
  .page {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
  }
}

This is one of the cleanest ways to answer “How would you make this layout responsive?” because it avoids changing markup order just to move regions visually. Still, mention accessibility: visual order should not fight keyboard or screen-reader order for meaningful content.

Responsive card grids with auto-fit and minmax

The most useful CSS Grid interview pattern is:

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

This creates as many columns as fit, each at least 220px wide and otherwise sharing remaining space. It works for cards, tiles, product listings, search results, and profile grids.

auto-fit collapses empty tracks, so existing items stretch to fill space. auto-fill keeps empty tracks around, which can preserve column slots even when there are fewer items. In most responsive card grids, auto-fit is what you want.

Interview wording:

“I’d use repeat(auto-fit, minmax(220px, 1fr)) so the grid adapts without hard-coded breakpoints. The min value protects card readability; the 1fr max lets cards expand evenly.”

If the interviewer asks about browser support, Grid is broadly supported in modern browsers. The real compatibility concern is usually old enterprise browsers or complex subgrid support, not basic Grid.

Grid line placement

You can place items by grid lines:

.hero {
  grid-column: 1 / -1;
}

.featured {
  grid-column: span 2;
  grid-row: span 2;
}

1 / -1 means start at the first column line and end at the last. span 2 means occupy two tracks from the auto-placement position.

Named lines are useful in design systems:

.shell {
  display: grid;
  grid-template-columns: [full-start] 1fr [content-start] minmax(0, 1120px) [content-end] 1fr [full-end];
}

.content { grid-column: content; }
.fullBleed { grid-column: full; }

This pattern creates a centered content column with full-bleed sections. It is a strong senior-level answer for marketing pages and editorial layouts.

Alignment cheatsheet

CSS Grid has two alignment layers: items within cells and the grid within its container.

| Property | Meaning | |---|---| | justify-items | Align items horizontally inside their grid cells | | align-items | Align items vertically inside their grid cells | | place-items | Shorthand for both | | justify-content | Align the whole grid horizontally if extra space exists | | align-content | Align the whole grid vertically if extra space exists | | place-content | Shorthand for both | | justify-self | Override horizontal alignment for one item | | align-self | Override vertical alignment for one item |

A common interview trap is confusing justify-content with justify-items. If the grid tracks already fill the container, justify-content may appear to do nothing. Use justify-items when you want content inside cells to align.

Worked interview prompt: build a dashboard shell

Prompt: “Create a responsive dashboard with a sidebar, top bar, content area, and cards.”

A strong answer:

.dashboard {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar content";
}

.sidebar { grid-area: sidebar; }
.topbar { grid-area: topbar; }
.content {
  grid-area: content;
  min-width: 0;
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-content: start;
}

@media (max-width: 800px) {
  .dashboard {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "content";
  }

  .sidebar {
    display: none;
  }
}

Then explain the choices. The fixed sidebar supports navigation. minmax(0, 1fr) prevents overflow in the content column. The content area becomes its own grid for cards. On mobile, the sidebar might become a drawer rather than occupying vertical space. That reasoning is more important than perfect syntax.

Common CSS Grid interview questions

What is the difference between explicit and implicit grid?

The explicit grid is defined by grid-template-columns and grid-template-rows. The implicit grid is created automatically when items are placed outside the explicit tracks or when auto-placement needs more rows or columns. You can size implicit tracks with grid-auto-rows and grid-auto-columns.

What does grid-auto-flow: dense do?

It lets the browser backfill holes with later items if they fit. This can create a masonry-like effect, but it may visually reorder items, which can be confusing for keyboard navigation and screen-reader users. Use carefully.

How do you make equal-height cards?

Grid rows naturally align items in the same row to the row height. For card internals, use flex or grid inside each card:

.card {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

That keeps header, body, and actions aligned.

What is subgrid?

Subgrid lets a nested grid inherit track sizing from its parent grid, which helps align nested content. It is useful for forms, cards, and editorial layouts. Mention support if relevant, and offer a fallback with duplicated grid definitions if needed.

Mistakes and pitfalls

Using Grid for everything. Flexbox is simpler for one-dimensional layouts. Choose the tool based on the layout problem.

Forgetting min-width: 0. Grid children can overflow because their default minimum size is content-based. Add min-width: 0 on grid items that contain long text, tables, or charts.

Hard-coding too many breakpoints. auto-fit and minmax often reduce breakpoint complexity.

Breaking semantic order. Grid can visually rearrange content, but meaningful reading order should remain sensible in the DOM.

Confusing gaps and margins. Use gap for spacing between grid tracks. Use margin for spacing outside components.

Creating non-rectangular template areas. Named areas must be rectangular.

Interview prep checklist

Be ready to write these from memory:

• A three-column grid with repeat(3, 1fr).
• A responsive card grid with repeat(auto-fit, minmax(220px, 1fr)).
• A dashboard shell using grid-template-areas.
• A full-bleed content layout using named lines.
• A nested card layout with header, body, and footer.
• A fix for overflow using minmax(0, 1fr) and min-width: 0.

When describing CSS Grid on a resume or in interviews, connect it to maintainability:

• “Built responsive dashboard shell with CSS Grid template areas, reducing layout-specific media queries.”
• “Replaced percentage-based card layout with auto-fit/minmax, improving responsiveness across tablet breakpoints.”
• “Implemented design-system layout primitives for content, sidebar, and full-bleed regions using named grid lines.”

CSS Grid interviews reward clarity. Know the properties, but more importantly, explain the layout intent: define tracks, place regions, handle overflow, keep accessibility intact, and use responsive patterns that do not collapse under real content.

Container queries and Grid in modern interviews

A modern Grid answer can mention container queries when the component should respond to its own available space rather than the viewport. This is useful for reusable cards that appear in a sidebar, modal, and full-width page. Viewport media queries answer “How wide is the browser?” Container queries answer “How wide is this component’s parent?”

.cardList {
  container-type: inline-size;
  display: grid;
  gap: 1rem;
}

@container (min-width: 640px) {
  .cardList {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

In an interview, do not force container queries into every answer. Use them when the component is meant to be portable across layouts. A good explanation is: “The page shell can use Grid for macro layout, and the card list can use container queries so it adapts wherever the product team places it.”

How to explain Grid on a whiteboard

When you cannot write full CSS, describe Grid in three passes. First, define the tracks: “This layout has a fixed navigation column and a flexible content column.” Second, place regions: “Header and main content occupy the right column; the sidebar spans both rows.” Third, cover responsive behavior: “Below tablet width, the layout becomes one column and navigation moves to a drawer.”

That explanation shows you understand the mental model. Syntax can be looked up; track definition, placement, overflow handling, and accessibility order are the interview signals.

Related guides

• CSS Flexbox Cheatsheet for Interviews — Main Axis, Cross Axis, and Common Layouts — A focused CSS flexbox interview cheatsheet covering main axis, cross axis, container and item properties, common layouts, and the traps candidates usually miss.
• Big-O Complexity Cheatsheet for Coding Interviews 2026 — A no-fluff Big-O reference card covering every complexity class, data structure, and algorithm pattern you'll face in coding interviews.
• API Design Interview Cheatsheet in 2026 — Patterns, Examples, Practice Plan, and Common Traps — A practical API design interview cheatsheet for 2026: how to scope the problem, choose REST/GraphQL/gRPC patterns, model resources, handle auth, versioning, rate limits, and avoid the traps that cost senior candidates offers.
• AWS Interview Cheatsheet in 2026 — Patterns, Examples, Practice Plan, and Common Traps — A high-signal AWS interview cheatsheet for 2026 covering architecture patterns, IAM, networking, reliability, cost, debugging, and the answers that show real cloud judgment.
• Backend System Design Interview Cheatsheet in 2026 — Patterns, Examples, Practice Plan, and Common Traps — A backend System Design interview cheatsheet for 2026 with the core flow, architecture patterns, capacity heuristics, reliability tradeoffs, and traps that separate senior answers from vague box drawing.