CSS grid-template-columns Property

What You’ll Learn

The grid-template-columns property defines the number and size of column tracks in a CSS grid container.

Introduction

The grid-template-columns property in CSS is a fundamental part of the CSS Grid Layout Module. It defines the columns of a grid container, specifying the size and number of columns. This property allows developers to create complex, responsive layouts with ease.

Definition and Usage

Set grid-template-columns on a grid container with display: grid. List track sizes separated by spaces, or use functions like repeat() and minmax() for flexible patterns.

📝 Syntax

The syntax for the grid-template-columns property involves defining one or more track sizes, which can be a length, a percentage, a fraction, or the keyword auto:

.container {
  grid-template-columns: track-size track-size ...;
}

Basic Example

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

With repeat()

.container {
  grid-template-columns: repeat(3, 1fr);
}

Default Value

The default value of the grid-template-columns property is none, meaning no grid columns are defined and the grid container has no explicit columns.

Syntax Rules

• Applies to grid containers only, not individual grid items.
• Accepts length, percentage, fr, auto, minmax(), and repeat().
• Each value creates one column track unless wrapped in repeat().
• The property is not inherited.
• Pair with grid-template-rows for full grid structure.

💎 Property Values

Examples Gallery

Create fixed and flexible columns, use repeat() for equal columns, apply minmax() for responsive sizing, and build an auto-fit card grid.

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

.container {
  grid-template-columns: repeat(3, 1fr);
}

.container {
  grid-template-columns: repeat(3, minmax(120px, 1fr));
}

.card-grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
}

♿ Accessibility

• Use adequate column width so text remains readable without horizontal scrolling.
• Test at narrow viewports when using fixed pixel columns.
• Prefer minmax() and auto-fit for responsive layouts that adapt to zoom.
• Keep DOM order logical even when columns reorder visually on small screens.
• Do not rely on column position alone to convey meaning; use headings and labels.

💡 Best Practices