CSS: grid-template-columns

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

Minimal example

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

@media (max-width: 40rem) {
  .cards { grid-template-columns: 1fr; }
}

The fr unit shares remaining space. minmax() prevents a track from becoming too narrow while still allowing it to grow.

Common mistakes

• Remember that columns belong on the Grid container, not on the item you want to size.
• Use minmax(0, 1fr) when long content should be allowed to shrink within its track.
• Test the minimum width with real content; three columns may not fit every viewport.