ใน Tailwind CSS ระยะแถวทำให้องค์ประกอบครอบครองสองแถวขึ้นไปภายในกริด ใช้เพื่อกำหนดจำนวนแถวที่องค์ประกอบควรครอบครอง/ขยาย อนุญาตให้ผู้ใช้ปรับขนาดและตำแหน่งของรายการกริดในหลายแถวและสร้างเค้าโครงที่แตกต่างกัน นอกจากนี้ยังสามารถใช้เพื่อสร้างเลย์เอาต์กริดที่ยืดหยุ่นและตอบสนองสำหรับหน้าเว็บ
บทความนี้จะยกตัวอย่างวิธีการขยายแถวใน Tailwind CSS
จะสร้างช่วงแถวใน Tailwind ได้อย่างไร
หากต้องการทำให้แถวขยายใน Tailwind ให้สร้างโปรแกรม HTML จากนั้นใช้ “ แถว-span-
สำหรับการนำไปใช้จริง โปรดดูขั้นตอนที่ให้ไว้:
ขั้นตอนที่ 1: สร้างช่วงคอลัมน์ในโปรแกรม HTML
สร้างโปรแกรม HTML และใช้ปุ่ม “ แถว-span-
< ร่างกาย >
< แผนก ระดับ = 'grid grid-rows-4 grid-flow-col gap-3 m-3 text-center' >
< แผนก ระดับ = 'row-span-3 bg-teal-500 p-5' > 1 < / แผนก >
< แผนก ระดับ = 'บีจี-น้า-500 p-5' > 2 < / แผนก >
< แผนก ระดับ = 'ช่วงแถว-2 bg-น้าน-500 p-5' > 3 < / แผนก >
< แผนก ระดับ = 'บีจี-น้า-500 p-5' > 4 < / แผนก >
< แผนก ระดับ = 'บีจี-น้า-500 p-5' > 5 < / แผนก >
< แผนก ระดับ = 'row-span-4 bg-teal-500 p-5' > 6 < / แผนก >
< / แผนก >
< / ร่างกาย >
ที่นี่ในพาเรนต์
- “ กริด ” class ใช้เพื่อสร้างเค้าโครงกริด
- “ ตารางแถว-4 ” class กำหนดหมายเลขแถวในตารางเป็น 4
- “ กริดโฟลว์คอล ” class วางรายการกริดในแนวนอนในคอลัมน์
- “ ช่องว่าง-3 ” คลาสกำหนดระยะห่าง 3 หน่วยระหว่างแต่ละรายการกริด
- “ ม.3 ” คลาสใช้ระยะขอบ 3 หน่วยรอบคอนเทนเนอร์กริด
- “ ศูนย์ข้อความ ” คลาสตั้งค่าข้อความของแต่ละรายการกริดไปที่กึ่งกลาง
ในเด็ก
- “ แถว-ช่วง-3 ” class ระบุว่าองค์ประกอบควรครอบคลุม 3 แถวในกริด
- “ แถว-ช่วง-2 ” class ระบุว่าองค์ประกอบควรครอบคลุม 2 แถวในกริด
- “ แถว-ช่วง-4 ” class ระบุว่าองค์ประกอบควรครอบคลุม 4 แถวในกริด
- “ bg-น้าน-500 ” class กำหนดสีน้านเป็นพื้นหลังของรายการกริด
- “ หน้า-5 ” class เพิ่มช่องว่างภายใน 5 หน่วยให้กับเนื้อหาภายในรายการย่อย
ขั้นตอนที่ 2: ตรวจสอบผลลัพธ์
ดูหน้าเว็บ HTML เพื่อตรวจสอบว่ามีการใช้ช่วงแถวหรือไม่:
ในเอาต์พุตด้านบน สังเกตได้ว่ามีการใช้ช่วงแถวสำเร็จตามที่ระบุไว้
บทสรุป
หากต้องการทำให้แถวขยายใน Tailwind ให้ใช้ปุ่ม ' แถว-span-
” ในโปรแกรม HTML และระบุจำนวนแถวที่แต่ละองค์ประกอบควรขยาย สำหรับการยืนยัน ดูการเปลี่ยนแปลงบนหน้าเว็บ HTML บทความนี้ได้ยกตัวอย่างวิธีการขยายแถวใน Tailwind CSS