Tailwind CSS นำเสนอระบบกริดที่ช่วยให้ผู้ใช้สามารถแบ่งหน้าเว็บออกเป็นคอลัมน์และแถวโดยใช้ยูทิลิตี Grid-cols และ Grid-rows นอกจากนี้ยังมียูทิลิตีการเริ่มต้นและสิ้นสุดของคอลัมน์กริดเพื่อควบคุมขนาดและการจัดวางองค์ประกอบในคอลัมน์กริด ยูทิลิตีเหล่านี้ช่วยให้ผู้ใช้สามารถระบุตำแหน่งเริ่มต้นและสิ้นสุดขององค์ประกอบภายในโครงร่างกริด
บทความนี้จะอธิบายวิธีการทำให้คอลัมน์เริ่มต้นหรือสิ้นสุดที่เส้นตารางที่ n ที่ระบุใน Tailwind CSS
จะสร้างคอลัมน์เริ่มต้นหรือสิ้นสุดที่เส้นตารางที่ n ใน Tailwind ได้อย่างไร
หากต้องการให้คอลัมน์เริ่มต้นหรือสิ้นสุดที่เส้นตารางที่ n ใน Tailwind ให้ใช้ ' col-start-
ขั้นตอนที่ 1: ระบุตำแหน่งเริ่มต้นและสิ้นสุดขององค์ประกอบกริดในโปรแกรม HTML
สร้างโปรแกรม HTML และใช้ “ col-start-
< ร่างกาย >
< h1 ระดับ = 'ศูนย์ข้อความ text-2xl' >
Tailwind CSS - การเริ่มต้นคอลัมน์ / จบ
h1 >
< แผนก ระดับ = 'กริด กริด-คอล-4 แก็ป-3 ม-3' >
< แผนก ระดับ = 'col-start-2 col-span-2 bg-teal-500 p-5' > 1 แผนก >
< แผนก ระดับ = 'col-สตาร์ท-1 col-end-3 bg-teal-500 p-5' > 2 แผนก >
< แผนก ระดับ = 'col-สตาร์ท-3 col-end-5 bg-น้าน-500 p-5' > 3 แผนก >
< แผนก ระดับ = 'col-start-2 col-span-3 bg-teal-500 p-5' > 4 แผนก >
< แผนก ระดับ = 'col-start-1 col-end-5 bg-teal-500 p-5' > 5 แผนก >
แผนก >
ร่างกาย >
ที่นี่ในพาเรนต์
- “ กริด ” ใช้เพื่อสร้างเค้าโครงตาราง
- “ ตาราง-cols-4 ” class ระบุว่ากริดควรมี 4 คอลัมน์ที่มีขนาดเท่ากัน
- “ ช่องว่าง-3 ” คลาสกำหนดระยะห่าง 3 หน่วยระหว่างแต่ละรายการกริด
- “ ม.3 ” คลาสเพิ่มระยะขอบ 3 หน่วยรอบคอนเทนเนอร์กริด
ในเด็กภายใน
- “ col-start-2 คุณสมบัติ ” ระบุว่ารายการกริดเริ่มต้นที่คอลัมน์ 2
- “ col-span-2 ” ระบุว่ารายการกริดตรงบริเวณ 2 คอลัมน์
- “ col-start-1 ” ใช้เพื่อเริ่มรายการกริดจากคอลัมน์ 1
- “ คอล-เอนด์-3 ” ระบุว่ารายการกริดสิ้นสุดที่คอลัมน์ 3
- “ col-start-3 ” ระบุว่ารายการกริดเริ่มต้นจากคอลัมน์ที่สอง
- “ คอล-เอนด์-5 คุณสมบัติ ” สิ้นสุดรายการกริดที่คอลัมน์ 5
- “ col-span-3 ” ระบุว่ารายการกริดตรงบริเวณ 3 คอลัมน์
- “ bg-น้าน-500 ” กำหนดสีน้านเป็นพื้นหลังของรายการกริดทั้งหมด
- “ หน้า-5 ” เพิ่มช่องว่างภายใน 5 หน่วยให้กับเนื้อหาภายในรายการกริด
ขั้นตอนที่ 2: ตรวจสอบผลลัพธ์
เพื่อให้แน่ใจว่ามีการใช้ตำแหน่งเริ่มต้นและสิ้นสุดของคอลัมน์กริด ให้ดูหน้าเว็บ HTML:
เอาต์พุตด้านบนบ่งชี้ว่าตำแหน่งเริ่มต้นและตำแหน่งสิ้นสุดของคอลัมน์กริดได้ถูกนำไปใช้สำเร็จตามที่ระบุไว้
บทสรุป
หากต้องการให้คอลัมน์เริ่มต้นหรือสิ้นสุดที่เส้นตารางที่ n ใน Tailwind ให้ใช้ปุ่ม ' col-start-