CSS grid-template-columns Property

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

Initial Value none
Applies to Grid containers.
Inherited No.
Animatable Yes. Columns are animatable.
Version CSS Grid Layout Module Level 1
DOM Syntax object.style.gridTemplateColumns = "40px 40px 40px";

Syntax

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

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-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>

Another example with grid-templates-columns property:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
      display: grid;
      grid-template-columns: 40px 150px auto 80px;
      grid-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>

Values

Value Description
auto The size of the columns takes up the size of the container.This is the default value of the property.
max-content The size of each columns depends on the largest item in the columns.
min-content The size of each columns depends on the smallest item in the columns.
minmax(min.max) The size range is greater than or equal to "min" and less than or equal to "max".
<length> The size of the columns is specified by length value.
<percentage> The size of the columns is specified by percentages.
<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.
fit-content Represents 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.
This value is considered to be experimental.
repeat Represents 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.
This value is considered to be experimental.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.




Related articles