Tidadigi Logo

Tailwind CSS Grid Template Columns

Class này chấp nhận nhiều giá trị trong Tailwind CSS. Tất cả thuộc tính được bao phủ dưới dạng class. Nó là một giải pháp thay thế cho thuộc tính CSS grid-template-columns. Nó dùng để thiết lập số lượng và kích thước cột của grid. Ở đây, ta thực hiện điều tương tự để phát triển front-end nhanh hơn. Số cột được thiết lập bằng số giá trị cung cấp cho class này.

Grid Template Columns:

  • grid-cols-1: Mỗi hàng chỉ có một cột duy nhất.
  • grid-cols-2: Mỗi hàng chỉ có hai cột.
  • grid-cols-3: Mỗi hàng chỉ có ba cột.
  • grid-cols-4: Mỗi hàng chỉ có bốn cột.
  • grid-cols-5: Mỗi hàng chỉ có năm cột.
  • grid-cols-6: Mỗi hàng có sáu cột.
  • grid-cols-7: Mỗi hàng có bảy cột.
  • grid-cols-8: Mỗi hàng có tám cột.
  • grid-cols-9: Mỗi hàng có chín cột.
  • grid-cols-10: Mỗi hàng có mười cột.
  • grid-cols-11: Mỗi hàng có mười một cột.
  • grid-cols-12: Mỗi hàng có mười hai cột.
  • grid-cols-none: Không tuân theo thuộc tính grid-column.

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>

Output:

tailwind-css-grid-template-columns
Last Updated : 20/07/2025