CSS grid-template-columns Property


The grid-template-columns property in CSS is used to set the number of columns and size of the columns of the grid. This property accepts more than one values. The number of columns is set by the number of values given to this property.

The grid-template-columns property specifies the number (and the widths) of columns in a grid layout.

Defines the columns of a grid container. You can specify the width of a column by using a keyword (like auto) or a length (like 10px). The number of columns is determined by the number of values defined in the space-separated list.

CSS Syntax

grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;

Supported Browsers:

  • Firefox: 52.0, 2.0 -moz-
  • Google Chrome: 50.0, 4.0 -webkit-
  • Internet Explorer: 10.0
  • Safari: 9.0, 3.1 -webkit-
  • Opera: 37.0, 15.0 -webkit-, 11.1

Example -