The grid-template-columns property is the heart of defining the vertical tracks (columns) of a CSS Grid layout. It allows you to specify the number of columns and their widths using various units.

Fractional Units (fr)

The fr unit is unique to CSS Grid. It represents a fraction of the available free space in the grid container. For example, 1fr 1fr creates two equal columns, while 2fr 1fr makes the first column twice as wide as the second.

The repeat() Function

When creating grids with many columns of the same size, writing out the units can get repetitive. The repeat() function simplifies this. repeat(3, 1fr) is equivalent to 1fr 1fr 1fr.

Mixing Units

You can mix different units in a single declaration. For instance, 200px 1fr 2fr creates a fixed 200px column, and divides the remaining space between the other two columns in a 1:2 ratio.

Best Practices

Use fr units for fluid layouts that adapt to screen sizes. Use fixed units (px) for elements that must maintain specific dimensions, like sidebars or ad slots.