Tailwind CSS Grid Template Columns

Last Updated : 23 Mar, 2022

This class accepts more than one value in tailwind CSS all the properties are covered as in class form. It is the alternative of CSS grid-template-columns property in CSS. It is used to set the number of columns and size of the columns of the grid, here we will do the same but for fast development of front-end. The number of columns is set by the number of values given to this class.

Grid Template Columns:

grid-cols-1: Each row concedes only one column.
grid-cols-2: Each row concedes only two columns.
grid-cols-3: Each row concedes only three columns.
grid-cols-4: Each row concedes only four columns.
grid-cols-5: Each row concedes only five columns.
grid-cols-6: Each row concedes six columns.
grid-cols-7: Each row concedes seven-columns.
grid-cols-8: Each row concedes eight columns.
grid-cols-9: Each row concedes nine columns.
grid-cols-10: Each row concedes ten columns.
grid-cols-11: Each row concedes eleven columns.
grid-cols-12: Each row concedes twelve columns.
grid-cols-none: Does not follow the grid-column property.

Syntax:

<element class="grid grid-cols-number"> Contents... </element>

Example:

HTML

<!DOCTYPE html>  
<html> 
  
<head>  
    <title>Tailwind grid-cols Class</title>  
  
    <link href= 
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet">  
</head>  
  
<body class="text-center">  
    <h1 class="text-green-600 text-5xl font-bold"> 
        GeeksforGeeks 
    </h1>  
  
    <b>Tailwind CSS grid-cols Class</b>  
  
    <div id="main" class="grid grid-cols-3 gap-1 justify-evenly">  
        <div class="bg-green-700 w-26 h-12">1</div>  
        <div class="bg-green-500 w-26 h-12">2</div>  
        <div class="bg-green-300 w-26 h-12">3</div>  
        <div class="bg-green-700 w-26 h-12">4</div>  
        <div class="bg-green-500 w-26 h-12">5</div>  
        <div class="bg-green-300 w-26 h-12">6</div>  
    </div>  
</body>  
  
</html>