חיפוש ]

כיצד עובדת הפונקציה ()minmax

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

הפונקציה ()minimax וכיצד היא עובדת?

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

minmax(min, max)

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

  • Length
  • Percentage
  • Fractional Unit
  • max-content
  • min-content
  • auto

בואו ניתן דוגמאות לכל אחת מהן…

1. Length

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

minmax function default

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

.grid {
    display: grid;
    grid-template-columns: minmax(100px, 200px) 1fr 1fr;
}
minmax function - length

2. Percentage

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

.grid {
    display: grid;
    grid-template-columns: minmax(200px, 50%) 1fr 1fr;
}
minmax function - percentage

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

3. Fractional Unit

Fractional Unit היא יחידה החדשה אשר בדומה לפונקציה minmax() הוצגה עם הספסיפיקציות CSS Grid. האורך, המשתמש ביחידת ה fr מייצג חלק של המקום הפנוי ב Container של הגריד.

לדוגמה, בואו נאמר שיש לנו גריד ברוחב 100px ובעל שתי עמודות. עמודה אחת ברוחב קבוע של 20px ועמודה שנייה ברוחב 1fr. בפועל, העמודה השנייה תהיה באורך 80px מכיוון והיא לוקחת את כל השטח הפנוי שנשאר.

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

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

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

.grid {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) 1fr 1fr;
}
minmax function - fr unit

מכיוון וכל העמודות הם 1fr – הן יתפסו מקום שווה בגריד ב Viewport רחב יותר.

4. max-content

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

לדוגמה, אם תוכן התא הוא משפט כלשהו – הרוחב האידיאלי של התא יהיה הרוחב שיכיל את כל אורך המשפט כאשר לא משנה כמה ארוך יהיה וזאת ללא שבירת שורות.

אם נקח את הדוגמה הקודמת, בואו נגדיר שהתא הצהוב יהיה במינימום ובמקסימום שלו max-content.

.grid {
    display: grid;
    grid-template-columns: minmax(max-content, max-content) 1fr 1fr;
}
minmax function - max-content

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

5. min-content

מילת המפתח min-content, בדומה ל max-content, גם היא ערך מיוחד. היא מייצגת את הגודל הקטן ביותר האפשרי עבור התא שאינו מוביל לגלישה (overflowing) אלא אם היא בלתי נמנעת.

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

.grid {
    display: grid;
    grid-template-columns: minmax(min-content, min-content) 1fr 1fr;
}
minmax function - min-content

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

6. auto

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

אם נמצא בשימוש כמקסימום, הערך auto יהיה שווה לערך ה max-content. אם  נמצא בשימוש כמינימום – הערך auto ייצג את הרוחב המינימלי הגדול ביותר שהתא יכול לקחת. ״הערך המינימלי הגדול ביותר״ שונה מערך ה min-content ונקבעעלי ידי min-width/min-height.

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

.grid {
    display: grid;
    grid-template-columns: minmax(auto, auto) 1fr 1fr;
}
minmax function - auto value

שימוש בפונקציה minmax – עיצוב ריספונסיבי ללא Media Queries

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

minmax function - Responsive Design without Media Queries

לכל עמודה בגריד יש רוחב מינמלי של 200px. כאשר אנו משנים את ה Viewport – מספר העמודות משתנה בכדי להתאים עצמו לרוחב האידיאלי. באמצעות CSS Grid והפונקציה minmax() ניתן לבצע זאת בשתי שורות CSS:

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

מעבר לפונקציה minmax() ישנם עוד שני אספקטים לקוד CSS זה:

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

עם זאת – אחת המגבלות של טכניקה זו היא שזו תעבוד רק כאשר רוחב כל אחת מהעמודות הוא רוחב שווה. עלינו להשתמש בפונקציה repeat יחד עם auto-fit מכיוון וזה מאפשר למספר העמודות להיות גמיש. אך למרות זאת הטכניקה הזו יכולה להיות מאד יעילה בנסיבות הנכונות…

נכתב פוסט על רחב יותר על שימוש בטכניקה זו לטובת עיצוב ריספונסיבי ללא Media Queries. תנו מבט….

 

Images & explanations thanks to bitsofcode.

רועי יוסף
רועי יוסף

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

  • חני 10 דצמבר 2018, 16:27

    תודה על המאמר המצוין!
    האם אפשר להשתמש בפונקציה minmax בתוך Media Queries?

    • רועי יוסף 29 דצמבר 2018, 15:27

      היי חני, כמובן, ככל CSS ניתן להשתמש בפונקציה זו ב Media Queries…

  • רמי יושובייב 6 יוני 2019, 16:30

    רועי, אפשר לאתגר אותך?

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

    • רועי יוסף 8 יוני 2019, 23:39

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

      במקרה שלך אני מבין שאתה מעוניין שהריווח ישתנה אז נאמר שזה ה Markup:

      <div class="grid">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
      </div>

      וה CSS יהיה משהו בסגנון הבא:

      .grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(100px, 100px));
          grid-auto-rows: 1fr;
          justify-content: space-between;
          grid-gap: 20px;
      }
      
      
      .grid > div {
          background: rgba(0, 0, 0, 0.1);
          display: flex;
          width: 100%;
          height: 100px;
      }
  • סער 28 אוקטובר 2020, 15:10

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

    תודה מראש.

  • שרה 24 פברואר 2022, 11:17

    תודה על המאמרים, הכל ברור ונח.. יש לי grid בו הרבה אלמנטים מסודרים כל 4 בשורה:

    
       .grid-container {
        display: grid;
        grid-template-columns: 25% 25% 25% 25%;
        grid-gap: 10px;
        padding: 10px;
    }
    

    הוספתי בשביל הרספונסיביות :

    
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    

    ועכשיו הוא מכניס לי יותר מ 4 בשורה למה?

    • רועי יוסף 26 פברואר 2022, 21:18

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

תגובה חדשה

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