Tidadigi Logo

Tailwind CSS Grid Template Rows

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 lựa chọn thay thế cho thuộc tính CSS grid-template-row trong CSS. Nó dùng để đặt số lượng hàng và kích thước hàng của grid. Ở đây chúng ta cũng làm tương tự để phát triển front-end nhanh hơn. Số lượng hàng được đặt bằng số lượng giá trị được cung cấp cho class này.

Grid Template Rows:

  • grid-rows-1: Mỗi hàng chỉ nhường một hàng duy nhất.
  • grid-rows-2: Mỗi hàng nhường hai hàng.
  • grid-rows-3: Mỗi hàng nhường ba hàng.
  • grid-rows-4: Mỗi hàng nhường bốn hàng.
  • grid-rows-5: Mỗi hàng nhường năm hàng.
  • grid-rows-6: Mỗi hàng nhường sáu hàng.
  • grid-rows-none: Không tuân theo thuộc tính grid-row.

Syntax:

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

Example 1:

HTML 
<!DOCTYPE html> 
<html>
  
<head> 
    <title>Tailwind grid-rows 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-rows Class</b> 

    <div id="main" class="grid grid-rows-3 grid-flow-col"> 
        <div class="bg-green-500 rounded-lg m-4 h-12">1</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">2</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">3</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">4</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">5</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">6</div> 
    </div> 
</body> 

</html>

Output:

tailwind-css-grid-template-rows

Example 2:

HTML 
<!DOCTYPE html> 
<html>
  
<head> 
    <title>Tailwind grid-rows 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-rows Class</b> 

    <div id="main" class="grid grid-rows-2 grid-flow-col"> 
        <div class="bg-green-500 rounded-lg m-4 h-12">1</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">2</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">3</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">4</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">5</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">6</div> 
    </div> 
</body> 

</html>

Output:

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