CSS grid-template-columns

The CSS grid-template-columns property is used to define the number of columns to create in grid layout. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {display: grid; gap: 2px; grid-template-columns: auto auto auto;}
      .container > div {border: 2px solid chocolate; padding: 12px; text-align: center;}
   </style>
</head>
<body>

   <div class="container">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
      <div>F</div>
   </div>
   
</body>
</html>

Output

Note - The grid as the value of display property, is used to make an element as a block level grid container.

Note - The gap property is used to define the gap between rows and columns in grid layout.

CSS grid-template-columns Syntax

The syntax of grid-template-columns property in CSS, is:

grid-template-columns: colOneSize colTwoSize colThreeSize . . . colNSize;

The value of columnSize should be defined using any of the following:

auto - used to automatically determine the size of all columns depending on the width of web page and the size of content in the column
length - used to define the custom sized columns. For example: 80px
max-content - used to define the column size based on the largest content
min-content - used to define the column size based on the largest word
none - This is the default value
initial used to define the column size based on the default value
inherit - used to define the column size using the value inherited by its parent

CSS grid-template-columns: length Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {display: grid; gap: 2px; grid-template-columns: 60px 300px 60px;}
      .container > div {border: 2px solid chocolate; padding: 12px; text-align: center;}
   </style>
</head>
<body>

   <div class="container">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
      <div>F</div>
   </div>
   
</body>
</html>

Output

To span the grid item for remaining spaces or columns, use auto. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {display: grid; gap: 2px; grid-template-columns: 60px auto 60px;}
      .container > div {border: 2px solid chocolate; padding: 12px; text-align: center;}
   </style>
</head>
<body>

   <div class="container">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
      <div>F</div>
   </div>
   
</body>
</html>

Output

That is, the size of middle column is changed from 300px to auto to occupy the remaining area.

CSS grid-template-columns: max-content Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {display: grid; gap: 2px; grid-template-columns: 60px max-content 60px;}
      .container > div {border: 2px solid chocolate; padding: 12px; text-align: center;}
   </style>
</head>
<body>

   <div class="container">
      <div>A</div>
      <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo, in!</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
      <div>F</div>
   </div>
   
</body>
</html>

Output

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo, in!

Note - Since second column is set to max-content, therefore the size of this column is decided based on the content in it.

CSS grid-template-columns: min-content Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {display: grid; gap: 2px; grid-template-columns: 60px min-content 60px;}
      .container > div {border: 2px solid chocolate; padding: 12px; text-align: center;}
   </style>
</head>
<body>

   <div class="container">
      <div>A</div>
      <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo, in!</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
      <div>F</div>
   </div>
   
</body>
</html>

Output

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo, in!

Note - Since the largest word is consectetur, therefore the size of second column was set to be the size of this word.

CSS Online Test

« Previous Tutorial Next Tutorial »