טיפים לכלי פיתוח: איך לבדוק רשת CSS

Sofia Emelianova
Sofia Emelianova

כלי הפיתוח של Chrome מאפשרים לנפות באגים בתצוגות רשת של CSS בצורה אינטואיטיבית באמצעות מגוון אפשרויות להצגה חזותית.

בסרטון הזה מוסבר איך להפעיל או להשבית את שכבת-העל של הרשת בחלונית רכיבים, ולהשתמש בה כדי:

שכבת-על של רשת.

  • הצגה חזותית ובדיקה של פריסות רשת.
  • כשאתם מציבים פריטים בתצוגת רשת, כדאי להיעזר במספרי השורות והעמודות.
  • אם יש לכם הרבה פריטים בתצוגת הרשת והמספרים מבלבלים, תוכלו להשתמש בשמות של קווים ואזורים ולראות אותם בשכבת-העל.
  • בודקים את הגדלים של הטראקים.

בנוסף, בעזרת כלי העריכה של הרשת שבחלונית רכיבים > סגנונות, אפשר ליישר פריטים ואת התוכן שלהם בפריסה של רשת בלחיצה על לחצן, במקום להקליד כללי CSS.

עורך הרשת.

כדי לקבל חוויית למידה מעשית יותר, מומלץ לעיין במדריך בדיקת CSS Grid.