CSS - grid-template-columns Property

Quiz

CSS grid-template-columns property is used to define the number and size of columns in a grid layout. The values are space separated list.

Syntax

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

Property Values

Value	Description
none	The columns may be created if needed. Default.
auto	The size of the column depends on the size of the container and on the size of the content of items in the columns.
max-content	The size of each column with this value depends on the size of the largest item in the column.
min-content	The size of each column with this value depends on the size of the smallest item in the column.
length	The size of the columns is specified in length units (e.g. px,em etc.)
initial	This sets the property to its default value.
inherit	This inherits the property from the parent element.

Examples of CSS Grid Template Columns Property

The following examples explain the grid-template-columns property with different values.

Grid Template Columns Property with None Value

To not define any explicit column sizes for the grid container, we use the none value. It effectively resets the column definitions, and the grid will not use any defined column structure. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         display: grid;
         grid-template-columns: none;
         grid-gap: 10px;
         background-color: lightgray;
         padding: 10px;
      }

      .grid-container>div {
         border: 3px solid blue;
         color: white;
         background-color: #4d4dff;
         text-align: center;
         padding: 20px;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-template-columns property
   </h2>
   <h4>
      grid-template-columns: none
   </h4>
   <div class="grid-container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
      <div>
         Item-4
      </div>
   </div>

</body>

</html>

Grid Template Columns Property with Auto Value

To allow columns to adjust their size automatically based on their content, we use the auto value. Each column will be as wide as necessary to fit its content. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         display: grid;
         grid-template-columns: auto auto auto;
         grid-gap: 10px;
         background-color: lightgray;
         padding: 10px;
      }

      .grid-container>div {
         border: 3px solid blue;
         color: white;
         background-color: #4d4dff;
         text-align: center;
         padding: 20px;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-template-columns property
   </h2>
   <h4>
      grid-template-columns: auto auto auto 
      (3 columns are created and sizes depend
      on the size of container and content of items)
   </h4>
   <div class="grid-container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
      <div>
         Item-4
      </div>
      <div>
         Item-5
      </div>
      <div>
         Item-6
      </div>
      <div>
         Item-7
      </div>
      <div>
         Item-8
      </div>
      <div>
         Item-9
      </div>
   </div>

</body>

</html>

Grid Template Columns Property with Max Content Value

To make a column as wide as its content requires, without any truncation or wrapping, we use the max-content value. The column will expand to fit the longest content it contains, regardless of the grid container's size. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         display: grid;
         grid-template-columns: 
         max-content max-content max-content;
         grid-gap: 10px;
         background-color: lightgray;
         padding: 10px;
      }

      .grid-container>div {
         border: 3px solid blue;
         color: white;
         background-color: #4d4dff;
         text-align: center;
         padding: 20px;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-template-columns property
   </h2>
   <h4>
      grid-template-columns: max-content 
      max-content max-content (3 columns are
      created and sizes depend on the largest
      item in the column)
   </h4>
   <div class="grid-container">
      <div>
         This is Item-1
      </div>
      <div>
         2
      </div>
      <div>
         This is Item-3 in row 1
      </div>
      <div>
         Item-4
      </div>
      <div>
         Item-5
      </div>
      <div>
         Item-6
      </div>
      <div>
         Item-7
      </div>
      <div>
         8
      </div>
      <div>
         Item-9
      </div>
   </div>

</body>

</html>

Grid Template Columns Property with Min Content Value

To make a column as narrow as possible while still fitting its content without overflow, we use the min-content value. The column will be only as wide as needed to display its content without wrapping, but no narrower. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         display: grid;
         grid-template-columns: 
         min-content min-content min-content;
         grid-gap: 10px;
         background-color: lightgray;
         padding: 10px;
      }

      .grid-container > div {
         border: 3px solid blue;
         color: white;
         background-color: #4d4dff;
         text-align: center;
         padding: 20px;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-template-columns property
   </h2>
   <h4>
      grid-template-columns: min-content 
      min-content min-content (3 columns 
      are created and sizes depend on the 
      smallest item in the column)
   </h4>
   <div class="grid-container">
      <div>
         Item-1
      </div>
      <div>
         2
      </div>
      <div>
         Item-3
      </div>
      <div>
         4
      </div>
      <div>
      </div>
      <div>
         6
      </div>
      <div>
         Item-7
      </div>
      <div>
         8
      </div>
      <div>
         Item-9
      </div>
   </div>

</body>

</html>

Grid Template Columns Property with Length Values

The number and sizes of the columns can be set using length values (e.g. px, em, rem etc.). Depending on the provided values, the number of columns with the specified width will be created. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container{
         display: grid;
         grid-gap: 10px;
         background-color: lightgray;
         padding: 10px;
      }
      .grid-container1 {
         grid-template-columns: 140px 200px 140px;
      }
      .grid-container2{
         grid-template-columns: 10em 7em 10em;
      }
      .container > div {
         border: 3px solid blue;
         color: white;
         background-color: #4d4dff;
         text-align: center;
         padding: 20px;
      }
      .
   </style>
</head>

<body>
   <h2>
      CSS grid-template-columns property
   </h2>
   <h4>
      grid-template-columns: 150px 200px 150px 
      (3 columns are created and sizes are 150px,
      200px and 150px respectively)
   </h4>
   <div class=" container grid-container1">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
      <div>
         Item-4
      </div>
      <div>
         Item-5
      </div>
      <div>
         Item-6
      </div>
      <div>
         Item-7
      </div>
      <div>
         Item-8
      </div>
      <div>
         Item-9
      </div>
   </div>
   <h4>
   grid-template-columns: 10em 7em 10em 
   (3 columns are created and sizes are 
   10em, 7em and 10em respectively)
   </h4>
   <div class="container grid-container2">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
      <div>
         Item-4
      </div>
      <div>
         Item-5
      </div>
      <div>
         Item-6
      </div>
      <div>
         Item-7
      </div>
      <div>
         Item-8
      </div>
      <div>
         Item-9
      </div>
   </div>

</body>

</html>

Grid Template Columns Property with Percentage Values

The number and sizes of the columns can be set using percentage values (e.g. 10%, 20%.). Depending on the provided values, the number of columns with the specified width will be created. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         display: grid;
         width: 500px;
         grid-gap: 10px;
         background-color: lightgray;
         padding: 10px;
         grid-template-columns: 25% 15% 25%;
      }

      .grid-container>div {
         border: 3px solid blue;
         color: white;
         background-color: #4d4dff;
         text-align: center;
         padding: 20px;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-template-columns property
   </h2>
   <h4>
      grid-template-columns: 25% 15% 25% 
      (3 columns are created and sizes are 25%,
      15% and 25% of the size of the container's
      width respectively)
   </h4>
   <div class="grid-container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
      <div>
         Item-4
      </div>
      <div>
         Item-5
      </div>
      <div>
         Item-6
      </div>
      <div>
         Item-7
      </div>
      <div>
         Item-8
      </div>
      <div>
         Item-9
      </div>
   </div>
</body>

</html>

Supported Browsers

Property
grid-template-columns	57	16	52	10	44

css_reference.htm

Print Page