grid-template-columns & rows

Defining Columns

List the sizes of each column separated by spaces.

Common values: px, %, fr, auto, minmax()

repeat()

Shorthand for repeated patterns: repeat(3, 1fr) = 1fr 1fr 1fr

minmax()

Sets a minimum and maximum size: minmax(200px, 1fr)

auto-fill & auto-fit

Responsive columns without media queries: repeat(auto-fill, minmax(250px, 1fr))

Example

/* 3 equal columns */
.grid { grid-template-columns: 1fr 1fr 1fr; }

/* Sidebar + main */
.layout { grid-template-columns: 260px 1fr; }

/* Using repeat() */
.grid { grid-template-columns: repeat(4, 1fr); }

/* Fixed rows */
.grid {
  grid-template-rows: 80px auto 60px; /* header, main, footer */
}

/* Responsive: auto cards */
.cards {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

CSS

Full Editor

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned