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