ויזואליזר Grid/Flex מזהה כל מיכל CSS Grid ו-Flexbox בדף האינטרנט ומרנדר את מבנה הפריסה שלהם כשכבות-על צבעוניות ישירות על הדף. ראה קווי grid, גדלי track, ערכי gap, כיווני flex, צירי יישור וגודל אלמנטי ילד — הכל מוצג ויזואלית מבלי לפתוח DevTools.
CSS Grid ו-Flexbox הם היסודות של פריסת אינטרנט מודרנית, אך הם בלתי נראים כברירת מחדל. אי אפשר לראות קווי grid, צירי flex או ערכי gap רק על ידי הסתכלות בדף. DevTools של הדפדפן מציעים כמה תכונות שכבת-על של grid, אך הן מחייבות אותך למצוא תחילה את המיכל בלוח Elements, להפעיל את שכבת-העל באופן ידני, ומציגות מיכל אחד בכל פעם. ויזואליזר Grid/Flex מבצע זאת באופן אוטומטי לחלוטין — הוא סורק את הדף, מוצא כל מיכל Grid ו-Flex, ומרנדר את מבנה הפריסה שלהם כשכבות-על ויזואליות. מיכלי Grid מציגים קווי עמודות ושורות עם גדלי track מתויגים. מיכלי Flex מציגים את כיוון הציר הראשי, יישור הציר הצולב וכיצד המרחב מתחלק. gaps מודגשים בצבעים המציגים את ערכי הפיקסלים שלהם. לחץ על כל מיכל כדי לראות לוח מאפיינים מפורט עם כל מאפיין פריסה מפורט.
מיכלי Grid מציגים קווים צבעוניים עבור כל track שורה ועמודה. גדלי track (1fr, auto, 200px) מתויגים על כל קו. אזורי gap מודגשים בצבעים שקופים למחצה המציגים את ערך ה-gap בפיקסלים. tracks מרומזים ומפורשים נבדלים על ידי קווים רצופים לעומת מנוקדים.
מיכלי Flex מציגים את הציר הראשי כחץ (row, row-reverse, column, column-reverse) ואת הציר הצולב ניצב אליו. justify-content ו-align-items מוצגים ויזואלית עם מחווני יישור מתויגים המציגים כיצד המרחב מתחלק בין הילדים.
הכלי סורק אוטומטית את הדף כולו ומוצא כל אלמנט עם display: grid או display: flex (כולל וריאנטים inline). ספירת תגית מציגה את המספר הכולל שזוהה. אין צורך לבחור אלמנטים ידנית — כולם נמצאים ומפורטים באופן אוטומטי.
לחץ על כל מיכל כדי לראות את מאפייני הפריסה המלאים שלו: grid-template-columns/rows, grid-gap, flex-direction, justify-content, align-items, flex-wrap, וכל מאפייני גודל הילדים (flex-grow, flex-shrink, flex-basis, grid-column, grid-row).
כל אלמנט ילד בתוך מיכל Grid או Flex מציג את גודלו המרונדר בפועל, ערכי flex-grow/shrink ומיקום אזור grid. ראה בדיוק כמה מקום כל ילד תופס ומדוע.
מזהה מיכלי Grid ו-Flex המקוננים בתוך מיכלי Grid/Flex אחרים. שכבת-העל מרנדרת כל רמת קינון בצבעים שונים כדי שתוכל לראות את היררכיית הפריסה המלאה.
עמודת grid רחבה או צרה יותר מהמצופה? שכבת-העל מציגה את גדלי ה-track בפועל (1fr שהומר ל-342px, auto שהומר ל-156px) כך שתוכל לראות בדיוק כיצד הדפדפן חישב את הגדלים.
מדוע ילד flex אחד רחב יותר מאחר? הויזואליזר מציג את ערכי flex-grow, flex-shrink ו-flex-basis עבור כל ילד, הופך את לוגיקת התפלגות המרחב לנראית.
שנה את גודל הדפדפן וצפה בשכבת-העל של ה-grid מתעדכנת בזמן אמת. ראה כיצד grid-template-columns משתנה מ-"1fr 1fr 1fr" בשולחן עבודה ל-"1fr" בנייד, ואמת את המעבר בכל נקודת עצירה.
בקר באתרי אינטרנט בנויים היטב וראה כיצד הם משתמשים בפריסות Grid ו-Flex בסביבת ייצור. שכבות-העל הויזואליות הופכות מושגים מופשטים (fr units, auto-fit, justify-content) למוחשיים ואינטראקטיביים.
בדוק שכל רשתות הכרטיסים בדף משתמשות באותו מספר עמודות וערכי gap. שכבת-העל הופכת חוסרי עקביות לנראים מיידית — חלק אחד המשתמש ב-gap של 20px בעוד אחר משתמש ב-24px ברור במבט אחד.
פתח את ה-floating dock של DevSuite Pro ולחץ על סמל ויזואליזר Grid/Flex. הכלי סורק את הדף ומזהה את כל מיכלי Grid ו-Flex.
כל מיכל Grid ו-Flex מקבל שכבת-על של מסגרת צבעונית. לוח מפרט את כל המיכלים שזוהו עם הסוג שלהם (Grid או Flex) ו-selector האלמנט.
לחץ על כל מיכל כדי לראות את מאפייני הפריסה המלאים שלו. מיכלי Grid מציגים קווי track וגדלים; מיכלי Flex מציגים כיווני ציר ויישור.
כל אלמנט ילד מציג את גודלו המחושב ומאפייני הפריסה הספציפיים (flex-grow, grid-area). הבן כיצד המרחב מתחלק בין הילדים.
לחץ שוב על סמל הכלי כדי להסיר את כל שכבות-העל ולחזור לתצוגת הדף הרגילה.
התקן את DevSuite Pro בחינם ופתח 39+ כלי פיתוח לדפדפן שלך.
