Tailwind CSS Grid Column Start / End

Class này chấp nhận nhiều giá trị trong Tailwind CSS. Tất cả thuộc tính đều được bao phủ ở dạng class. Nó là một lựa chọn thay thế cho CSS grid-column property. Trong CSS nó được dùng để mô tả số lượng thuộc tính. Cho phép thiết kế cấu trúc lưới và kiểm soát vị trí các phần tử lưới bằng Tailwind CSS. Nó có thể thay đổi bố cục các phần tử lưới bất kể thứ tự nguồn. Cho phép di chuyển các phần tử lưới để phù hợp với các ngữ cảnh khác nhau mà không cần sửa đổi markup. Nhưng nó giúp phát triển giao diện người dùng nhanh hơn. Số lượng cột được đặt bởi số lượng giá trị được cung cấp cho class này.

Grid Column Start / End:

  • col-auto
  • col-span-1
  • col-span-2
  • col-span-3
  • col-span-4
  • col-span-5
  • col-span-6
  • col-span-7
  • col-span-8
  • col-span-9
  • col-span-10
  • col-span-11
  • col-span-12
  • col-span-full 
  • col-start-1
  • col-start-2
  • col-start-3
  • col-start-4
  • col-start-5
  • col-start-6
  • col-start-7
  • col-start-8
  • col-start-9
  • col-start-10
  • col-start-11
  • col-start-12
  • col-start-13
  • col-start-auto
  • col-end-1
  • col-end-2
  • col-end-3
  • col-end-4
  • col-end-5
  • col-end-6
  • col-end-7
  • col-end-8
  • col-end-9
  • col-end-10
  • col-end-11
  • col-end-12
  • col-end-13
  • col-end-auto

Spanning columns (col-span): Class này sẽ bao phủ khu vực span. Số được đề cập sau class sẽ giữ khu vực của span. Chúng ta đều biết rằng có 12 cột lưới hoặc 12 span lưới.

Syntax:

<element class="col-span-number"> Contents... </element>

Class Grid Value: Class này chấp nhận một giá trị duy nhất như đã đề cập ở trên và mô tả dưới đây:

  • number: Nó giữ số lượng span mà một cột lưới sẽ chiếm.

Example:

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

    <div id="main" class="m-8 grid grid-cols-3 gap-1 justify-evenly"> 
        <div class="bg-green-300 rounded-lg h-12">1</div> 
        <div class="bg-green-300 rounded-lg h-12">2</div> 
        <div class="bg-green-300 rounded-lg h-12">3</div> 
        <div class="bg-green-500 col-span-2 rounded-lg h-12">4</div> 
        <div class="bg-green-300 rounded-lg h-12">5</div> 
        <div class="bg-green-500 col-span-3 rounded-lg h-12">6</div> 
    </div> 
</body> 

</html> 

Output:

tailwind-css-grid-column-start-end

Starting and ending lines (col-start|end): Class này được sử dụng để làm cho một phần tử bắt đầu hoặc kết thúc tại dòng lưới thứ n. Chúng cũng có thể được kết hợp với các tiện ích col-span-number để kéo dài một số cột cụ thể.

Note: Chúng ta có thể hợp nhất class này với class đã mô tả ở trên(Spanning columns (col-span)). Ví dụ dưới đây sẽ cung cấp cho bạn một ý tưởng về cách sử dụng nó.

Syntax:

<element class="col-start|end-number">..</element>

Parameter: Class này chấp nhận một tham số duy nhất như đã đề cập ở trên và mô tả dưới đây:

  • number: Tham số này xác định vị trí bắt đầu hoặc kết thúc của cột lưới hoặc cột bình thường.

Example:

HTML
<!DOCTYPE html>
<html>
  
<head> 
    <title>Tailwind col-start|end 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 col-start|end Class</b> 

    <div id="main" class="m-8 grid grid-cols-4 gap-1 justify-evenly"> 
        <div class="bg-green-500 col-start-2 col-span-2 
                    rounded-lg h-12">1</div> 
        <div class="bg-green-300 rounded-lg h-12">2</div> 
        <div class="bg-green-300 rounded-lg h-12">3</div> 
        <div class="bg-green-500 col-start-2 col-end-4 
                    rounded-lg h-12">4</div> 
        <div class="bg-green-300 rounded-lg h-12">5</div> 
        <div class="bg-green-300 rounded-lg h-12">6</div> 
        <div class="bg-green-300 rounded-lg h-12">7</div> 
        <div class="bg-green-500 col-start-2 col-span-3 
                    rounded-lg h-12">8</div>
    </div> 
</body> 

</html> 

Output:

tailwind-css-grid-column-start-end
Last Updated : 20/07/2025