Editor X: שימוש בגריד
זמן קריאה: 7 דקות
Editor X עובר ל-Wix Studio, הפלטפורמה החדשה שלנו לסוכנויות ופרילנסרים.פרטים נוספים על Wix Studio
גרידים של CSS הם דרך נהדרת להבטיח שהאלמנטים שלכם מאורגנים בצורה מובנית. ב-Editor X, כל קונטיינר ומקטע מגיעים עם גריד מובנה. אתם יכולים לבחור את מספר השורות והעמודות הדרושים להרכב, ולשנות את הגודל שלהן במידות שונות.
כאן תוכלו ללמוד עם עבודה עם גריד ב-Editor X:
רוצים לדעת עוד?
בדקו את השיעור שלנו על גרידים באקדמיה של Editor X.
התאמת גריד קיים
כל מקטע וקונטיינר מגיעים עם גריד מובנה בגודל 1x1 שאפשר להתאים אותו. שנו את הפריסה בקליק אחד, או צרו גריד משלכם על ידי גרירת הקווים מעל הקומפוזיציה הקיימת.
כדי לשנות את הגריד:
- הקליקו על הקונטיינר הרלוונטי או החלק בעמוד.
- שנו את הגריד באחת מהדרכים הבאות:
בחרו פריסה
התאמה אישית של גריד על קנבס
.
טיפ:
אתם יכולים גם להוסיף מקטע עם גריד מובנה, על ידי לחיצה על סמל הוספת המקטע 
.
.ניהול גריד מהחלונית Inspector
אתם יכולים לערוך את הגריד כדי להגיע לפריסה שמתאימה לכם בדיוק.אתם יכולים לשנות את מספר השורות והעמודות, לשנות את הגודל שלהן ואת הפערים ביניהן.
כדי לנהל את הגריד:
- הקליקו על הגריד הרלוונטי.
- הקליקו על אייקון חלונית ה-Inspector
בחלק העליון של Editor X. - הקליקו על הטאב Layout (פריסה).
וגלול מטה אל Display (תצוגה). - בחרו מה אתם רוצים לעשות:
- בחרו פריסה אחרת: הקליקו על התפריט הנפתח Layout (פריסה) כדי לבחור מראה שונה שמכיל אותו מספר תאים כמו הגריד הקיים.
- התאמה ידנית של הגריד: הקליקו למטה כדי ללמוד איך:
להוסיף עוד שורות או עמודות
ליד Columns (עמודות) או Rows (שורות).
ליד עמודה או שורה קיימים ובחרו אפשרות:
לשנות את הגודל של העמודות או השורות
לשנות את המרווח בין השורות והעמודות
למחוק עמודות או שורות
עבודה עם נקודות ברייקפוינט:
כשמעצבים גריד, הוא מופיע רק בנקודת הברייקפוינט הספציפית שאתם עובדים עליה. כדאי ליצור גריד לכל גודל מסך וגודל מסך כדי להבטיח שהרכב האלמנטים שלכם יהיה מושלם.
מיקום אלמנטים בגריד
בזמן הוספת אלמנטים והצבתם בגריד, יש כלים שונים שיעזרו לכם ליצור פריסה רספונסיבית:
אלמנטים לעגינה
הצמדת אלמנטים לקווי הרשת תבטיח שהם ימוקמו בדיוק כמו שאתם רוצים. כשאתם מוסיפים אלמנט לתא בגריד, הוא מוצמד אוטומטית לקווי האורך והרוחב הקרובים ביותר. אתם יכולים להתאים את ההצמדה לפי הצורך מהחלונית Inspector.
העברת אלמנטים לתא רשת אחר
במקטע Position (מיקום) ב-Inspector, אתם יכולים לבחור אלמנט ולראות את תאי הרשת שבהם הוא ממוקם. הקליקו על תא כלשהו בגריד כדי להעביר את האלמנט לשם, בלי צורך בגרירה ושחרור.
מתיחת אלמנטים למילוי תא גריד
בקליק אחד תוכלו למתוח אלמנטים כך שהם יתפרשו על פני כל התא בגריד. אם האלמנטים מחולקים על פני כמה תאים, הם יימתחו על כל התאים האלה.
טבלת יחידות רשת
אתם יכולים להשתמש במגוון רחב של יחידות מידה כדי ליצור את הגריד. תוכלו לשנות את הגודל של העמודות והשורות באמצעות אחוזים, פיקסלים או שברים. אתם גם יכולים להגדיר גודל מינימלי ומקסימלי לעמודות ולשורות, וגם להשתמש בנוסחאות לחישוב הגריד בגודל שמתאים לכם.
שימו לב:
אתם יכולים לבחור יחידות מידה שונות לעמודות ולשורות. כברירת מחדל, היחידות בשורות הן בפיקסלים, והיחידות של עמודות הן בשברים (fr).
יחידה | סוג היחידה | הסבר |
|---|---|---|
Fraction (fr) | גמישה | הגודל של העמודות והשורות יהיה שבר יחסי לגודל של החלק בעמוד או הקונטיינר. לדוגמה: בגריד עם 2 עמודות, אם הגודל של העמודה השמאלית הוא 2Fr ושל הימנית הוא 1Fr, העמודה השמאלית תהיה בגודל של 2/3 (שני שליש) מהחלק או מהקונטיינר. |
Auto | גמישה | הגובה והרוחב של השורות והעמודות ייקבע אוטומטית בהתאם לתוכן שבהן. |
אחוז (%) | גמישה | הגודל של העמודות והשורות יהיה אחוז מסוים מהגודל של החלק בעמוד או הקונטיינר. |
Pixels (px) | קבועה | הגודל של העמודות והשורות יהיה מספר קבוע של פיקסלים בתוך החלק בעמוד או הקונטיינר. פיקסל אחד = 1/96 אינץ' |
Viewport Width (Vw) | גודל המסך | הגודל של העמודות והשורות יהיה אחוז מסוים מהרוחב של המסך (גודל החלון של הדפדפן). לדוגמה, אם המסך הוא ברוחב 50 ס"מ, 1Vw יהיה שווה 0.5 ס"מ. |
Viewport Height (Vh) | גודל המסך | הגודל של העמודות והשורות יהיה אחוז מסוים מהגובה של המסך (גודל החלון של הדפדפן). לדוגמה, אם המסך הוא בגובה 50 ס"מ, 1Vh יהיה שווה 0.5 ס"מ. |
Min/Max | אחר | בחירת ערך מינימלי ומקסימלי לגודל של העמודות והשורות. כשאתם בוחרים באפשרות הזו, תוכלו לבחור כל אחת מיחידות המידה האחרות לגריד. |
Min Content | אחר | העמודות והשורות לא יוכלו להיות קטנות מהערך הזה. |
Max Content | אחר | העמודות והשורות לא יוכלו להיות גדולות מהערך הזה. |
Calculation | אחר | יצירת נוסחה לחישוב הגודל של העמודות והשורות באמצעות כל אחת מיחידות המידה האחרות של הגריד. |
זה עזר לך?
|