css.properties

grid-template-columns

The grid-template-columns property specifies the columns of a grid.

Formal Syntax

grid-template-columns = none | <track-list> | <auto-track-list> | subgrid <line-name-list>? <track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>? <auto-track-list> = [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <line-name-list> = [ <line-names> | <name-repeat> ]+
Initial value
none
Applies to
grid containers
Inherited
no
Percentages
refer to corresponding dimension of the content area
Computed value
the keyword none or a computed track list
Animation type
if the list lengths match, by computed value type per item in the computed track list (see § 7.2.5 Computed Value of a Track Listing and § 7.2.3.3 Interpolation/Combination of repeat()); discrete otherwise

See specification

JavaScript Access

// Access via element.style element.style.gridTemplateColumns = "none";

Browser Support

standard | MDN · Spec · Spec

FeatureChromeFirefoxSafariEdge
grid-template-columns575210.116
animation1076616107
auto575210.179
fit-content575210.116
masonry—77preview—
max-content575210.179
min-content575210.179
minmax575210.116
none575210.179
repeat577610.116
subgrid1177116117

Behind a Flag

Some browsers require enabling a flag or preference:

  • grid-template-columns: masonry — firefox: #layout.css.grid-template-masonry-value.enabled = true (since 77)

Related Properties