קביעת גודל מסלולים ב-CSS Grid: שליטה מתקדמת בגודל פנימי וחיצוני

פריסת CSS Grid היא כלי רב עוצמה ליצירת פריסות ווב מורכבות ורספונסיביות. אחד מיתרונותיה המרכזיים טמון ביכולות הגמישות שלה לקביעת גודל מסלולים, המאפשרות לכם לשלוט בגודל השורות והעמודות בדיוק רב. הבנת מילות המפתח והפונקציות השונות לקביעת גודל מסלולים היא חיונית לבניית פריסות גמישות וקלות לתחזוקה. מאמר זה צולל לתוך המושגים המתקדמים של גודל פנימי (intrinsic) וחיצוני (extrinsic) ב-CSS Grid, ובוחן כיצד הם מאפשרים יצירת פריסות שמתאימות את עצמן בחן לתכנים וגדלי מסך מגוונים.

הבנת מסלולי גריד וקביעת גודלם

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

מהם מסלולי גריד?

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

הגדרת גודלי מסלולים

ניתן להגדיר גדלי מסלולים באמצעות המאפיינים grid-template-rows ו-grid-template-columns. מאפיינים אלו מקבלים רשימה של ערכים המופרדים ברווח, כאשר כל ערך מייצג את גודלו של המסלול המתאים. לדוגמה:

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto auto;
}

            

              
                Copy
              
            
          

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

גודל פנימי (Intrinsic) מול גודל חיצוני (Extrinsic)

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

גודל פנימי: מונחה-תוכן

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

• auto: ערך ברירת המחדל. גודל המסלול נקבע על ידי תרומת הגודל המינימלי הגדולה ביותר של פריטי הגריד במסלול. ברוב המקרים, פירוש הדבר הוא שהמסלול יהיה גדול מספיק כדי להכיל את כל התוכן מבלי לגלוש, אך הוא יכול להיות מושפע מערכי min-width/min-height שהוגדרו על פריטי הגריד.
• min-content: המסלול נקבע לגודל המינימלי שהתוכן דורש מבלי לגלוש. לדוגמה, טקסט יתקפל בנקודה הצרה ביותר האפשרית, גם אם זה שובר מילים בצורה לא טבעית.
• max-content: המסלול נקבע לגודל המקסימלי שהתוכן דורש מבלי לגלוש. עבור טקסט, פירוש הדבר שהוא ינסה להימנע מקיפול שורות ככל האפשר, מה שעלול לגרום למסלולים רחבים או גבוהים מאוד.
• fit-content(length): המסלול נקבע לגודל הקטן מבין max-content וה-length שצוין. זה מאפשר לכם להגדיר גודל מקסימלי למסלול תוך מתן אפשרות לכיווץ בהתבסס על התוכן שלו.

דוגמה: גודל פנימי עם min-content ו-max-content

נניח שיש לנו תרחיש עם שתי עמודות. גודל העמודה הראשונה נקבע עם min-content, והשנייה עם max-content. אם התוכן בעמודה הראשונה הוא מילה ארוכה, היא תישבר בכל נקודה אפשרית כדי להתאים לגודל התוכן המינימלי. העמודה השנייה, לעומת זאת, תתרחב כדי להכיל את התוכן ללא קיפול שורות.

            .grid-container {
  display: grid;
  grid-template-columns: min-content max-content;
  grid-gap: 10px;
}

.item1 {
  grid-column: 1;
}

.item2 {
  grid-column: 2;
}

            

              
                Copy
              
            
          

            <div class="grid-container">
  <div class="item1">Supercalifragilisticexpialidocious</div>
  <div class="item2">Short text</div>
</div>

            

              
                Copy
              
            
          

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

דוגמה: גודל פנימי עם fit-content()

הפונקציה `fit-content()` שימושית כאשר רוצים שמסלול יתאים לגודל התוכן, אך תהיה לו גם מגבלת גודל מקסימלית. ניתן להשתמש בזה כדי למנוע מעמודות או שורות להפוך לגדולות מדי, תוך מתן אפשרות לכיווצן אם התוכן קטן יותר.

            .grid-container {
    display: grid;
    grid-template-columns: fit-content(200px) 1fr;
    grid-gap: 10px;
}

            

              
                Copy
              
            
          

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

גודל חיצוני: מונחה-שטח

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

• length: ערך אורך קבוע (למשל, 100px, 2em, 50vh). המסלול יהיה בדיוק בגודל זה, ללא קשר לתוכן.
• percentage: אחוז מגודל מיכל הגריד (למשל, 50%). המסלול יתפוס אחוז זה מהמקום הפנוי.
• fr (יחידת שבר): מייצגת שבר מהמקום הפנוי במיכל הגריד לאחר שכל המסלולים האחרים קיבלו את גודלם. זו הדרך הגמישה ביותר לחלק מקום בין מסלולים.

דוגמה: גודל חיצוני עם יחידות fr

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

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 10px;
}

            

              
                Copy
              
            
          

בדוגמה זו, למיכל הגריד יש שתי עמודות. העמודה הראשונה תופסת יחידת שטח אחת מהמקום הפנוי, בעוד שהעמודה השנייה תופסת שתי יחידות שטח. אם רוחב מיכל הגריד הוא 600px, רוחב העמודה הראשונה יהיה 200px, ורוחב העמודה השנייה יהיה 400px (בניכוי המרווח בין העמודות). זה מבטיח שהעמודות תמיד ישמרו על היחס הפרופורציונלי ביניהן, ללא קשר לגודל המסך.

דוגמה: גודל חיצוני עם אחוזים ואורכים קבועים

            .grid-container {
  display: grid;
  grid-template-columns: 200px 50% 1fr;
  grid-gap: 10px;
}

            

              
                Copy
              
            
          

בדוגמה זו, העמודה הראשונה מוגדרת לרוחב קבוע של `200px`. העמודה השנייה תתפוס 50% מרוחב מיכל הגריד. לבסוף, העמודה השלישית משתמשת ביחידת `1fr`, כך שהיא תתפוס את כל המקום שנותר לאחר קביעת גודלן של שתי העמודות הראשונות.

שילוב של גודל פנימי וחיצוני: minmax()

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

            minmax(min, max)
            

              
                Copy
              
            
          

• min: הגודל המינימלי של המסלול. זה יכול להיות כל ערך חוקי לקביעת גודל מסלול, כולל מילות מפתח פנימיות (auto, min-content, max-content) או ערכים חיצוניים (length, percentage, fr).
• max: הגודל המקסימלי של המסלול. גם זה יכול להיות כל ערך חוקי לקביעת גודל מסלול. אם ה-`max` קטן מה-`min`, המערכת תתעלם מה-`max` ותשתמש ב-`min`.

דוגמה: שימוש ב-minmax() לעמודות רספונסיביות

מקרה שימוש נפוץ עבור minmax() הוא יצירת עמודות רספונסיביות בעלות רוחב מינימלי, אך שיכולות להתרחב כדי למלא את המקום הפנוי.

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}

            

              
                Copy
              
            
          

כאן, repeat(auto-fit, minmax(200px, 1fr)) יוצר כמה שיותר עמודות ברוחב של לפחות 200px, אך שיכולות להתרחב כדי למלא את השטח הנותר. מילת המפתח auto-fit מבטיחה שעמודות ריקות יתכווצו, ובכך יוצרת פריסה גמישה ורספונסיבית.

דוגמה: שילוב minmax() עם גודל פנימי

            .grid-container {
  display: grid;
  grid-template-columns: minmax(min-content, 300px) 1fr;
  grid-gap: 10px;
}

            

              
                Copy
              
            
          

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

יישומים מעשיים ושיטות עבודה מומלצות

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

• ניווט רספונסיבי: השתמשו ב-minmax() ליצירת פריטי ניווט בעלי רוחב מינימלי, אך שיכולים להתרחב כדי למלא את המקום הפנוי בסרגל הניווט.
• פריסות כרטיסים גמישות: השתמשו ב-repeat(auto-fit, minmax()) ליצירת פריסות כרטיסים שמתאימות את עצמן אוטומטית לגדלי מסך שונים, ומבטיחות שהכרטיסים יגלשו בצורה חיננית במסכים קטנים.
• סרגלי צד מודעי-תוכן: השתמשו ב-min-content או max-content כדי לקבוע את גודל סרגלי הצד בהתבסס על התוכן שלהם, מה שמאפשר להם להתרחב או להתכווץ לפי הצורך.
• הימנעו מרוחב קבוע: צמצמו את השימוש ברוחב קבוע (px) לטובת יחידות יחסיות (%, fr, em) כדי ליצור פריסות המותאמות לגדלי מסך והעדפות משתמש שונות.
• בדיקה יסודית: בדקו תמיד את פריסות הגריד שלכם על מכשירים וגדלי מסך שונים כדי להבטיח שהם מוצגים כראוי ומספקים חווית משתמש עקבית.

טכניקות מתקדמות לקביעת גודל בגריד

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

הפונקציה repeat()

הפונקציה repeat() מפשטת את יצירתם של מספר מסלולים באותו גודל. היא מקבלת שני ארגומנטים: מספר החזרות וגודל המסלול.

            repeat(number, track-size)
            

              
                Copy
              
            
          

לדוגמה:

            grid-template-columns: repeat(3, 1fr);
            

              
                Copy
              
            
          

זה שקול ל:

            grid-template-columns: 1fr 1fr 1fr;
            

              
                Copy
              
            
          

ניתן להשתמש בפונקציה repeat() גם עם מילות המפתח auto-fit ו-auto-fill ליצירת פריסות גריד רספונסיביות המותאמות אוטומטית למקום הפנוי.

מילות המפתח auto-fit ו-auto-fill

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

• auto-fit: אם כל המסלולים ריקים, המסלולים יתכווצו לרוחב 0.
• auto-fill: אם כל המסלולים ריקים, המסלולים ישמרו על גודלם.

דוגמה: שימוש ב-auto-fit לעמודות רספונסיביות

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}

            

              
                Copy
              
            
          

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

שיקולים עבור בינאום (i18n) ולוקליזציה (l10n)

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

• השתמשו ביחידות יחסיות: העדיפו יחידות יחסיות כמו em, rem, ואחוזים על פני יחידות קבועות כמו פיקסלים, כדי לאפשר לטקסט להשתנות בהתאם להעדפות גודל הגופן של המשתמש.
• גודל פנימי: השתמשו במילות מפתח של גודל פנימי כמו min-content, max-content, ו-fit-content() כדי להבטיח שהמסלולים יתאימו לגודל התוכן, ללא קשר לשפה.
• מאפיינים לוגיים: השתמשו במאפיינים לוגיים כמו inline-start ו-inline-end במקום במאפיינים פיזיים כמו left ו-right כדי לתמוך הן בשפות הנכתבות משמאל לימין (LTR) והן בשפות הנכתבות מימין לשמאל (RTL).
• בדיקות: בדקו את הפריסות שלכם עם שפות וכיווני כתיבה שונים כדי לזהות ולטפל בבעיות פוטנציאליות. הדמו מחרוזות ארוכות יותר, שעשויות להימצא בשפות שונות.

סיכום

קביעת גודל מסלולים ב-CSS Grid היא כלי רב עוצמה ורב-תכליתי ליצירת פריסות ווב רספונסיביות וגמישות. על ידי שליטה במושגים של גודל פנימי וחיצוני, הבנת הפונקציה minmax(), ומינוף הפונקציה repeat(), תוכלו לבנות פריסות המותאמות בחן לתכנים וגדלי מסך מגוונים. זכרו לקחת בחשבון את ההשפעה של בינאום ולוקליזציה כאשר אתם מעצבים עבור קהל גלובלי.

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