Studio Editor: עבודה עם גריד CSS מתקדם

זמן קריאה: 7 דקות
ב-Studio Editor אתם יכולים להשתמש בגריד CSS מתקדם כדי לארגן את הפריסה של אלמנטים ומקטעים: לבחור את מספר השורות והעמודות, ולהגדיר את הגודל שלהן באמצעות מידות רספונסיביות (למשל fr,‏ Min/max, ‏%). 
היכנסו ל-Wix Studio Academy כדי לצפות בוובינרים, מדריכים וקורסים נוספים בנושא Wix Studio.
בעמוד הזה תוכלו ללמוד הכל על עבודה עם גריד CSS:

מעבר מגריד מקטעים לגריד CSS

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

כדי לעבור מגריד מקטעים לגריד CSS:

  1. בחרו את המקטע הרלוונטי ב-Editor.
  2. הקליקו על חץ ה-Open Inspector (פתיחת כלי העריכה)  בפינה הימנית העליונה של ה-Editor.
  3. גללו מטה אל Layout (פריסה).
  4. הקליקו על Switch (מעבר) ליד Advanced CSS grid (גריד CSS מתקדם).
  5. הקליקו על Switch to CSS Grid (מעבר לגריד CSS).
צילום מסך שמראה את האפשרות לעבור לגריד מתקדם בחלונית העריכה
מה השלב הבא?
בחלונית ה-Inspector (עריכה) תוכלו לערוך את השורות, העמודות והמרווחים לפי הצורך. אתם יכולים גם לגרור קווי גריד על הקנבס כדי להזיז אותם.  

החלת גריד CSS על אלמנטים אחרים

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

כדי להחיל גריד CSS:

  1. בחרו את האלמנט הרלוונטי ב-Editor.
  2. הקליקו על אייקון הפעולות הנוספות .
  3. הקליקו על Apply Advanced CSS Grid (הפעלת גריד CSS מתקדם).
  4. בחרו פריסה מהתפריט הנפתח 1x1.
    טיפ: בחרו ב-Other (אחר) אם אתם רוצים להגדיר בעצמכם את מספר השורות והעמודות. 
צילום מסך שמראה את התפריט הנפתח שעליו מקליקים כדי לבחור פריסה אחרת
מה השלב הבא?
בחלונית ה-Inspector (עריכה) תוכלו לערוך את השורות, העמודות והמרווחים לפי הצורך. אתם יכולים גם לגרור קווי גריד על הקנבס כדי להזיז אותם.  

עריכת גריד CSS

אתם יכולים לערוך את הגריד כדי להגיע לפריסה שמתאימה לכם בדיוק: לשנות את מספר השורות והעמודות ולכוונן את הגודל שלהן והרווחים ביניהן.

כדי לערוך גריד CSS:

  1. בחרו את האלמנט או המקטע הרלוונטיים.
  2. בחרו איך אתם רוצים לעצב את הגריד: 
עבודה עם נקודות ברייקפוינט:
העיצוב שלכם רלוונטי רק לנקודת הברייקפוינט שאתם עובדים עליה. כדאי להתאים את הגריד לכל נקודת ברייקפוינט כדי להבטיח שקומפוזיציית האלמנטים תהיה מושלמת. בדוגמה שלמטה, הגדרנו פריסה שונה לכל נקודת ברייקפוינט (3 עמודות במחשב לעומת 3 שורות בטאבלטים). 


מיקום אלמנטים בגריד

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

קיבוע אלמנטים (Docking)

קיבוע אלמנטים לקווי רשת מבטיח שהם ימוקמו בדיוק במקום הרצוי. ב-Studio Editor, כל האלמנטים מקובעים אוטומטית, אבל אתם יכולים לשנות את הקיבוע בצורה ידנית ולהוסיף שוליים. 
GIF שמראה איך לשנות את נקודות הקיבוע של אלמנט בתא בגריד

העברת אלמנטים בין תאים בגריד

בחלק Position (מיקום) בחלונית ה-Inspector (עריכה) אפשר לבחור אלמנט ולראות את תא הגריד שבו הוא נמצא. אתם יכולים להקליק על תא כלשהו בגריד כדי להעביר את האלמנט לשם, בלי צורך להשתמש בגרירה ושחרור. 
אפשר גם להוסיף את מספרי העמודות והשורות הספציפיים – מאוד מועיל כשצריך למקם אלמנט על פני כמה תאים בגריד. 
קובץ GIF שמראה איך להקליק על תאים אחרים ב-Inspector כדי להעביר במהירות אלמנטים בין תאים

טבלת היחידות של גרידים

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

זה עזר לך?

|