1. css
  2. /properties
  3. /grid-template-columns

grid-template-columns

Defintion

The grid-template-columns property is used in CSS Grid Layout to define the columns of a grid. It sets the size, shape, and position of each column in the grid.

Examples

Basic usage:

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
}

Using the repeat() function:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Using grid tracks with different sizes:

.grid-container {
  display: grid;
  grid-template-columns: 100px 1fr 2fr;
}

Values

ValueDescription
<track-size>Specifies the size of a single track. Can be a length, a percentage, or the auto keyword.
autoAutomatically sizes the track based on its content.
minmax(min, max)Defines a size range for the track, where min is the minimum size and max is the maximum size.
fit-content(length)Sizes the track based on its content, but not smaller than the specified length.
repeat(n, <track-list>)Repeats the track list n times.

Best Practices

  • Use fr units to create flexible, responsive grids that adjust to the size of the container.
  • Use the minmax() function to create columns that have a minimum and maximum size, ensuring that they don't get too small or too large.
  • Use the auto keyword sparingly, as it can result in unpredictable grid layouts.
  • Use the repeat() function to create repeated patterns of columns, which can save time and make your code more concise.
  • Consider using named grid lines and grid areas to make your grid code more readable and easier to maintain.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes