CSS Grid: Two-Dimensional Layout

30‑second interview answer

CSS Grid is a two-dimensional layout system (rows and columns together). You define grid tracks with grid-template-columns/rows and place items with lines, spans, or named areas. Use Grid for page layouts and complex alignment; use Flexbox for one-dimensional components.

Grid mental model

• You create a grid container: display: grid
• Define columns/rows (tracks)
• Place items

Example:

.container {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 16px;
}

This is perfect for sidebar + content.

fr unit (interview favorite)

1fr means “one fraction of remaining space”.

grid-template-columns: 1fr 2fr;

Second column gets double space.

grid-template-areas (super readable)

.container {
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-template-areas:
    "header header"
    "main sidebar"
    "footer footer";
}
 
header { grid-area: header; }
main { grid-area: main; }
aside { grid-area: sidebar; }
footer { grid-area: footer; }

Centering (even easier)

.container {
  display: grid;
  place-items: center;
}

Flex vs Grid (how to answer)

• Grid: 2D layout, page structure, aligned rows/cols
• Flex: 1D layout, components, distribution and alignment

Common mistakes

1. Trying to use Grid when Flex is simpler
2. Over-nesting grids
3. Not using gap

Mini Q&A

Q1: What is Grid good for?

• 2D layouts, page-level structure.

Q2: What does 1fr mean?

• a fraction of remaining space.

Q3: How to center in Grid?

• place-items: center.

Summary checklist

• I can define grid tracks.
• I can explain fr units.
• I can use grid areas.
• I know when to choose Grid vs Flex.