Skip to main content

What does the grid-template-columns property do?

CSSJunior~1 min read
Suggest an edit

grid-template-columns sets the structure of columns in CSS Grid, defining how many there will be and the size of each one.

Examples:

css
.container { display: grid; grid-template-columns: 200px 1fr 1fr; }

This creates a grid of three columns: the first is fixed (200px), the other two are flexible, one fraction (fr) each.

Allowed column values:

  • px, em, rem: fixed units
  • %: relative sizes
  • fr: fractions of free space
  • auto: size based on content
  • min-content, max-content, minmax(): auto-calculations
  • repeat(): repeating columns, for example:
css
grid-template-columns: repeat(3, 1fr); /* three equal columns */

Summary: the property controls the number and width of columns in a grid container.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit
What does the grid-template-columns property do?: CSS Interview Question