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

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

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

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

minmax(min, max)

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

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

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

1. Length

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

<div class="grid">
  <div class="cell yellow">First column</div>
  <div class="cell grey">Second column</div>
  <div class="cell grey">Third column</div>
</div>

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

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

2. Percentage

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

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

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

3. Fractional Unit

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

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

לא נרחיב מעבר לכך על fr units אך אתם מוזמנים לתת מבט במדריך שכתבתי על CSS Grid המרחיב על יחידה זו בין היתר.

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

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

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

יחידת fr תקפה רק כערך מקסימלי ב-minmax(), לא כמינימום. כערך מינימלי השתמשו באורך, באחוזים או במילות מפתח (min-content, max-content, auto).

4. max-content

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

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

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

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

כפי שאנחנו רואים, העמודה מתרחבת כדי להתאים את עצמה לאורך המשפט כולו. מכיוון שגם המינימום וגם המקסימום מוגדרים כ 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;
}

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

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 – עיצוב ריספונסיבי ללא Media Queries

כפי שראינו, ישנם מספר מצבים בהם השימוש בפונקציה minmax() רלוונטי וניתן להשתמש בו בדרכים שונות. אך כנראה השימוש הפופלרי והיותר שימושי לשימוש בפונקציה minmax() הוא זה שהיא מאפשרת לנו ליצור עיצוב ריספונסיבי ללא שימוש ב 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 מכיוון שזה מאפשר למספר העמודות להיות גמיש. אך למרות זאת הטכניקה הזו יכולה להיות מאד יעילה בנסיבות הנכונות.

שאלות נפוצות

שאלות נפוצות על פונקציית minmax():

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

לעוד תכונת CSS מודרנית שמרחיבה custom properties עם טיפוסים ואנימציות חלקות, ראו את המדריך לתכונת @property ב-CSS.
 

Images & explanations thanks to bitsofcode.