Grid template columns

Sets a grid's columns and their widths.

What does grid-template-columns do?

grid-template-columns sets how many columns a grid has and how wide each one is.

.products { display: grid; grid-template-columns: 1fr 1fr 1fr; }   /* three equal columns */

Level: Journeyman · More CSS terms at this level

Updated September 27, 2026