במדריך הזה מוסבר איך לגלות רשתות של CSS בדף, לבדוק אותן ולנפות באגים בבעיות פריסה בחלונית Elements (רכיבים) ב-Chrome DevTools.
הדוגמאות שמוצגות בצילומי המסך שמופיעים במאמר הזה הן משני דפי האינטרנט הבאים: קופסת פירות וקופסת חטיפים.
זיהוי רשתות של CSS
כשמחילים עליו רכיב HTML בדף display: grid או display: inline-grid, אפשר לראות את התג grid לידו בחלונית רכיבים.
לוחצים על התג כדי להציג או להסתיר שכבת-על של רשת בדף. שכבת-העל מופיעה מעל הרכיב, כשהיא פרוסה כרשת כדי להציג את המיקום של קווי הרשת והמסלולים שלה:
פותחים את החלונית פריסה. כשכוללות רשתות בדף, בחלונית Layout יש קטע בשם Grid שמכיל כמה אפשרויות לצפייה במשבצות האלה.
יישור פריטים ברשת והתוכן שלהם בעזרת עורך הרשת
אפשר ליישר פריטים בתצוגת רשת ואת התוכן שלהם בלחיצת כפתור במקום להקליד כללי CSS.
כדי ליישר בין פריטים ברשת לבין התוכן שלהם:
בחלונית Elements > Styles (סגנונות), לוחצים על הלחצן
Grid Editor לצד display: grid.
ב-Grid Editor, לוחצים על הלחצנים המתאימים כדי להגדיר את מאפייני ה-CSS
align-*ו-justify-*לפריטי הרשת ולתוכן שלהם.
חשוב לבדוק את התוכן והפריטים ברשת המותאמים באזור התצוגה.
אפשרויות להצגת המשבצות
הקטע Grid בחלונית Layout מכיל 2 קטעי משנה:
- הגדרות התצוגה של שכבת-על
- שכבות-על של רשת
בואו נבחן לעומק כל אחד מקטעי המשנה האלה.
הגדרות התצוגה של שכבת-על
הגדרות התצוגה של שכבת-על מורכבת משני חלקים:
a. תפריט נפתח עם האפשרויות הבאות:
- הסתרת תוויות קו: הסתרת תוויות הקו של כל שכבת-על של רשת.
- הצגת מספרי שורות: הצגת מספרי השורות בכל שכבת-על של רשת (מסומנת כברירת מחדל).
- Show קו שמות: הצגת שמות השורות של כל שכבת-על של רשת, במקרה של רשתות עם שמות השורות.
b. תיבות סימון עם אפשרויות בתוך:
- הצגת גודל הטראק: מקישים על לחצן החלפת המצב כדי להציג או להסתיר את הגדלים של הטראקים.
- Show area שמות: מקישים על לחצן החלפת המצב כדי להציג או להסתיר שמות של אזורים, במקרה של רשתות עם אזורי רשת בעלי שמות.
- הרחבת קווי רשת: כברירת מחדל, קווי הרשת מוצגים רק בתוך הרכיב שבו מוגדרים
display: gridאוdisplay: inline-grid. כשמפעילים את האפשרות הזו, קווי הרשת מתרחבים לקצה של אזור התצוגה לאורך כל ציר.
נבחן את ההגדרות האלה לעומק.
הצגה של מספרי השורות
כברירת מחדל, מספרי השורות החיוביים והשליליים מוצגים בשכבת-העל של הרשת.
הסתרת תוויות שורה
בוחרים באפשרות הסתרת תוויות של שורות כדי להסתיר את מספרי השורות.
הצגת שמות של שורות
אפשר לבחור באפשרות הצגת שמות השורות כדי להציג את שמות השורות במקום את המספרים. בדוגמה הזו יש לנו ארבע שורות עם שמות: שמאל, אמצעי 1, בינוני וימני.
בהדגמה הזו, הרכיב הכתום מתפרס משמאל לימין, ב-CSS grid-column: left / right.
הצגת שמות השורות מאפשרת להציג באופן חזותי את מיקומי ההתחלה והסיום של הרכיב בקלות רבה יותר.
הצגת הגדלים של הטראקים
מסמנים את התיבה הצגת גודלי טראקים כדי לראות את גודלי הטראקים ברשת.
בכלי הפיתוח יוצגו הערך [authored size] - [computed size] בכל תווית שורה: גודל מקורי: הגודל שהוגדר בגיליון הסגנון (הושמט אם לא הוגדר). גודל מחושב: הגודל בפועל של המסך.
בהדגמה הזו, גודלי העמודות של snack-box מוגדרים ב-CSS grid-template-columns:1fr 2fr;.
לכן, תוויות השורות של העמודות מציגות גדלים של מחברים וגדלים שמחושבים: 1fr - 96.66px ו-2fr - 193.32px.
בתוויות השורות של השורות מוצגים רק הגדלים המחושבים: 80px ו-80px כי לא הוגדרו גודלי שורות בגיליון הסגנון.
הצגת שמות האזורים
כדי להציג את שמות האזורים, צריך לסמן את התיבה הצגת שמות האזורים. בדוגמה הזו יש שלושה אזורים ברשת – top, bottom1 ו-bottom2.
הרחבת קווי רשת
מסמנים את התיבה הרחבת קווי רשת כדי להרחיב את קווי הרשת לקצה של אזור התצוגה לאורך כל ציר.
שכבות-על של רשת
בקטע Grid שכבת-על מופיעה רשימה של רשתות בדף, כשלכל אחת יש תיבת סימון ואפשר לבחור ביניהן.
הפעלת תצוגות שכבת-על של רשתות מרובות
אפשר להפעיל תצוגות שכבת-על של רשתות מרובות. בדוגמה הזו הופעלו שתי שכבות-על של רשת – main ו-div.snack-box, שכל אחת מהן מיוצגת בצבעים שונים.
התאמה אישית של צבע שכבת-העל של הרשת
כדי להתאים אישית כל צבע בשכבת-על של רשת, לוחצים על בוחר הצבעים.
הדגשת הרשת
לוחצים על סמל ההדגשה כדי להדגיש את רכיב ה-HTML באופן מיידי, גוללים אליו בדף ובוחרים אותו בחלונית Elements.
