CSS Grid — Interview Questions & Answers

Ques: What is CSS Grid?

Ans: CSS Grid is a two-dimensional layout system that allows developers to create complex web layouts using rows and columns.

• It provides precise control over positioning, spacing, and alignment of items.
• Unlike Flexbox (which is one-dimensional), Grid handles both rows and columns simultaneously.

Example:

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto;
  gap: 10px;
}

Ques: What are the main components of a CSS Grid?

1. Grid Container → The parent element with display: grid.
2. Grid Items → The direct children of the grid container.
3. Grid Lines → Invisible lines dividing the grid into rows/columns.
4. Grid Tracks → The space between grid lines (rows or columns).
5. Grid Area → A rectangular space made by combining cells.

Ques: How do you define columns and rows in CSS Grid?

Ans: Use grid-template-columns and grid-template-rows to define structure.

Example:

.container {
  display: grid;
  grid-template-columns: 100px 200px auto;
  grid-template-rows: 100px 150px;
}

Ques: What does fr unit mean in Grid?

Ans: The fr unit represents a fraction of the available space in the grid container. It’s flexible and adjusts automatically.

Example:

grid-template-columns: 1fr 2fr 1fr;

Ques: What is the repeat() function used for?

Ans: repeat() allows you to avoid repetitive code by defining columns or rows easily.

Example:

grid-template-columns: repeat(3, 1fr);

Ques: How do you create gaps between grid items?

Ans: Use the gap property (or row-gap, column-gap).

Example:

.container {
  display: grid;
  gap: 20px;
}

Ques: What is the grid-template-areas property?

Ans: It defines named areas of the grid — a visual layout map using names.

Example:

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr auto;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

Ques: What is grid-column and grid-row used for?

Ans: They define how many columns or rows an item should span.

Example:

.item {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

Ques: What are implicit and explicit grids?

• Explicit Grid: Defined by the developer using grid-template-columns or grid-template-rows.
• Implicit Grid: Created automatically when items are placed outside the explicit grid.

Example:

grid-auto-rows: 100px;

Ques: What are justify-items and align-items used for in Grid?

Property	Axis	Description
justify-items	Horizontal	Aligns items inside their grid cells
align-items	Vertical	Aligns items along the block (vertical) axis

Example:

.container {
  justify-items: center;
  align-items: center;
}

Ques: What is justify-content and align-content in Grid?

Property	Axis	Description
justify-content	Horizontal	Aligns the whole grid within the container
align-content	Vertical	Aligns grid tracks as a whole

Example:

.container {
  justify-content: space-between;
  align-content: center;
}

Ques: What does grid-auto-flow do?

Ans: It controls how items are automatically placed in the grid.

Value	Description
row	Fill rows first (default)
column	Fill columns first
dense	Fills gaps more efficiently

Example:

grid-auto-flow: column dense;

Ques: What is a Subgrid in CSS Grid?

Ans: A subgrid allows a nested grid to inherit track sizes from its parent grid.

It enables consistent alignment across complex layouts.

Example:

.child {
  display: grid;
  grid-template-columns: subgrid;
}

Ques: What is the difference between Grid and Flexbox?

Feature	Flexbox	Grid
Layout Type	One-dimensional	Two-dimensional
Axis	Main & Cross	Rows & Columns
Content Placement	Based on content flow	Based on defined grid
Alignment	Easier for small components	Better for full-page layouts

Ques: How to make a responsive grid layout?

Ans: Use auto-fit, auto-fill, and minmax() for responsive grids.

Example:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}