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

נסביר בצורה רחבה על הפונקציה minmax של CSS Grid.

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

הפונקציה ()minimax

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

minmax(min, max)

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

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

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

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

Percentage

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

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

minmax function - percentage

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

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 רחב יותר.

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 – רוחב העמוד נשאר קבוע.

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

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

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

Images & explanations thanks to bitsofcode.

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

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

1תגובות...

השאירו תגובה

פעימות