W3docs
en
Log in

CSS grid-template-columns Property

Use the grid-template-columns CSS property to define the size and the width of columns. See how to use this CSS property values.

The grid-template-columns property defines the size (width) of each column in the grid layout:

Initial Valuenone
Applies toGrid containers.
InheritedNo.
AnimatableYes. Columns are animatable.
VersionCSS Grid Layout Module Level 1
DOM Syntaxobject.style.gridTemplateColumns = "40px 40px 40px";

Syntax

CSS grid-template-columns

grid-template-columns: none | auto | max-content | min-content | minmax() | <length> | <percentage> | <flex> | fit-content | repeat | initial | inherit;

Example of the grid-template-columns property:

CSS grid-template-columns code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
        margin-top: 20px;
      }
      .example > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-template-columns property example</h2>
    <div class="example">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>
  </body>
</html>
Try it Yourself »

Result

CSS grid-template-columns length

Example of the grid-template-columns applied to grid-container:

CSS grid-template-columns length example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: 40px 150px auto 80px;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-template-columns property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>
  </body>
</html>
Try it Yourself »

Values

ValueDescriptionPlay it
noneThis is the default value of the property.Play it »
autoThe track size is determined by its content, but can grow to fill available space.Play it »
max-contentThe size of each column depends on the largest item in the column.Play it »
min-contentThe size of each column depends on the smallest item in the column.Play it »
minmax(min, max)The size range is greater than or equal to "min" and less than or equal to "max".Play it »
<length>The size of the columns is specified by length value.Play it »
<percentage>The size of the columns is specified by percentages.Play it »
<flex>A non-negative dimension with the unit "fr" that specifies the track’s flex factor. Each <flex>-sized track shares remaining space in proportion to its flex factor.Play it »
fit-contentRepresents the min(max-content, max(auto, argument)), which is similar to auto (i.e. minmax(auto, max-content)), but the size is greater than the auto minimum.Play it »
repeatRepresents a repeated fragment of the track list, allowing a large number of columns that exhibit a recurring pattern to be written in a more compact form.Play it »
initialMakes the property use its default value.Play it »
inheritInherits the property from its parent element.Play it »

Practice

Practice

What is the function of the 'grid-template-columns' property in CSS?