ב-Tailwind CSS, טווח שורות גורם לאלמנט לתפוס שתי שורות או יותר בתוך הרשת. הוא משמש כדי להגדיר את מספר השורות שאלמנט צריך לתפוס/להרחיב. זה מאפשר למשתמשים להתאים את הגודל והמיקום של פריט הרשת על פני מספר שורות וליצור פריסות שונות. יתר על כן, ניתן להשתמש בו כדי ליצור פריסות רשת גמישות ומגוונות עבור דפי אינטרנט.
כתיבה זו תדגים את השיטה ליצירת טווח שורות ב-Tailwind CSS.
איך לגרום לשורות להתפרש ברוח גב?
כדי להרחיב את השורות ב-Tailwind, צור תוכנית HTML. לאחר מכן, השתמש ב' row-span-
ליישום מעשי, בדוק את השלבים המסופקים:
שלב 1: הפוך עמודות לטווח בתוכנית HTML
צור תוכנית HTML והשתמש ב-' row-span-
< גוּף >
< div מעמד = 'grid grid-rows-4 grid-flow-col gap-3 m-3 text-center' >
< div מעמד = 'row-span-3 bg-teal-500 p-5' > 1 < / div >
< div מעמד = 'bg-teal-500 p-5' > 2 < / div >
< div מעמד = 'row-span-2 bg-teal-500 p-5' > 3 < / div >
< div מעמד = 'bg-teal-500 p-5' > 4 < / div >
< div מעמד = 'bg-teal-500 p-5' > 5 < / div >
< div מעמד = 'row-span-4 bg-teal-500 p-5' > 6 < / div >
< / div >
< / גוּף >
כאן, באלמנט האב
- ' רֶשֶׁת 'מחלקה משמשת ליצירת פריסת רשת.
- ' רשת-שורה-4 מחלקה מגדירה את מספר השורות ברשת ל-4.
- ' grid-flow-col מחלקה ממקמת את פריטי הרשת בצורה אופקית בעמודות.
- ' פער-3 מחלקה קובעת מרווח של 3 יחידות בין כל פריט רשת.
- ' m-3 ” מחלקה מחילה שוליים של 3 יחידות סביב מיכל הרשת.
- ' מרכז טקסט מחלקה מגדירה את הטקסט של כל פריט רשת למרכז.
ברכיבי
- ' row-span-3 ' class מציינת שהאלמנט צריך להשתרע על פני 3 שורות ברשת.
- ' row-span-2 מחלקה מציינת שהאלמנט צריך להשתרע על פני 2 שורות ברשת.
- ' row-span-4 ” class מציין שהאלמנט צריך להשתרע על פני 4 שורות ברשת.
- ' bg-teal-500 הכיתה מגדירה את צבע הצהבהב לרקע של פריט הרשת.
- ' p-5 ” הכיתה מוסיפה ריפוד של 5 יחידות לתוכן בתוך פריטי הילד.
שלב 2: אימות פלט
הצג את דף האינטרנט של HTML כדי לוודא אם טווח השורות הוחל או לא:
בפלט לעיל, ניתן לראות כי תוחלת השורות הוחלה בהצלחה לפיה היא צוינה.
סיכום
כדי להרחיב את השורות ב-Tailwind, השתמש ב-' row-span-
' בתוכנת HTML וציין את מספר השורות שכל רכיב צריך להקיף. לאימות, הצג את השינויים בדף האינטרנט של HTML. כתיבה זו הדגימה את השיטה ליצירת טווח שורות ב-Tailwind CSS.