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