Class này chấp nhận nhiều giá trị trong Tailwind CSS. Tất cả các thuộc tính được bao phủ dưới dạng class. Nó là một lựa chọn thay thế cho CSS grid-row property trong CSS. Nó mô tả số lượng thuộc tính cho phép thiết kế cấu trúc lưới. Đồng thời, nó 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 phần tử lưới bất kể thứ tự gốc. Điều này 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 cơ bản. Nhưng nó dành cho phát triển front-end nhanh chóng. Số lượng hàng được đặt bởi số lượng giá trị được cung cấp cho class này.
Grid Rows Start / End:
- row-auto
- row-span-1
- row-span-2
- row-span-3
- row-span-4
- row-span-5
- row-span-6
- row-span-7
- row-span-8
- row-span-9
- row-span-10
- row-span-11
- row-span-12
- row-span-full
- row-start-1
- row-start-2
- row-start-3
- row-start-4
- row-start-5
- row-start-6
- row-start-7
- row-start-8
- row-start-9
- row-start-10
- row-start-11
- row-start-12
- row-start-13
- row-start-auto
- row-end-1
- row-end-2
- row-end-3
- row-end-4
- row-end-5
- row-end-6
- row-end-7
- row-end-8
- row-end-9
- row-end-10
- row-end-11
- row-end-12
- row-end-13
- row-end-auto
Spanning rows (row-span): Class này sẽ bao phủ khu vực span. Số được đề cập sau class sẽ giữ khu vực của một span. Tất cả chúng ta đều biết có 12 hàng lưới hoặc 12 span lưới.
Syntax:
<element class="row-span-number"> Contents... </element>
Parameter: Class này chấp nhận một tham số duy nhất như được đề cập ở trên và mô tả bên dưới:
number: Nó giữ số lượng span mà một hàng lưới sẽ chiếm.
Example:
HTML<!DOCTYPE html>
<html>
<head>
<title>Tailwind row-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 row-span Class</b>
<div id="main" class="m-8 grid grid-row-3 grid-flow-col gap-1">
<div class="bg-green-300 rounded-lg">1</div>
<div class="bg-green-300 rounded-lg">2</div>
<div class="bg-green-300 rounded-lg">3</div>
<div class="bg-green-500 row-span-2 rounded-lg">4</div>
<div class="bg-green-300 rounded-lg">5</div>
<div class="bg-green-500 row-span-3 rounded-lg">6</div>
</div>
</body>
</html>
Output:
Starting and ending lines (row-start|end): Class này được 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ể kết hợp với tiện ích row-span-number để span 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 (row-span)). Ví dụ bên dưới sẽ cung cấp cho bạn ý tưởng về cách sử dụng nó.
Syntax:
<element class="row-start|end-number">..</element>
Parameter: Class này chấp nhận một tham số duy nhất như được đề cập ở trên và mô tả bên dưới:
number: Tham số này xác định vị trí bắt đầu hoặc kết thúc của hàng lưới hoặc hàng bình thường.
Example:
HTML<!DOCTYPE html>
<html>
<head>
<title>Tailwind row-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 row-start|end Class</b>
<div id="main" class="m-8 grid grid-row-4
grid-flow-col gap-1 ">
<div class="bg-green-500 row-start-2 row-span-2
rounded-lg">1</div>
<div class="bg-green-300 rounded-lg">2</div>
<div class="bg-green-300 rounded-lg">3</div>
<div class="bg-green-500 row-start-2 col-end-4
rounded-lg">4</div>
<div class="bg-green-300 rounded-lg">5</div>
<div class="bg-green-300 rounded-lg">6</div>
<div class="bg-green-300 rounded-lg">7</div>
<div class="bg-green-500 row-start-2 row-span-3
rounded-lg">8</div>
</div>
</body>
</html>
Output:
