היחידה Fr ב CSS Grid

CSS Grid הציג יחידת מידה גמישה בשם fr (קיצור של Fractional Unit). 1fr מייצג חלק אחד מתוך השטח הפנוי בתוך grid container.

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

פריטי הגריד בדוגמאות הבאות ממוקמים באמצעות התכונה grid areas:

.grid-wrap {
    max-width: 100%;
    margin: 3em auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 50px 150px 50px;
    grid-template-areas: "head head2 . side" "main main2 . side" "footer footer footer footer";
}

כל אחת מארבעת העמודות תופסות את אותו מקום בגריד.

שימו לב! הדוגמאות בפוסט זה מציגות את הגריד כפי שהוא יופיע באתרי RTL (כלומר באתרים בשפה העובדת מימין לשמאל כגון השפה העברית). באתרים באנגלית (LTR) הגריד יוצג הפוך.

דוגמאות לשימוש ב fr

הנה גריד דומה, אך עם ערכי fr שונים. שימו לב כיצד רוחב העמודות משתנה:

.grid-wrap {
   /* ... */

   grid-template-columns: 1fr 1fr 40px 20%;
   grid-template-rows: 100px 200px 100px;

   /* ... */
}

בדוגמה האחרונה ה-sidebar תופס 2fr מהשטח. הרוחב שלו שווה לרוחב המשולב של העמודה הראשונה והשנייה.

.grid-wrap {
   /* ... */

   grid-template-columns: 1fr 1fr 40px 2fr;
   grid-template-rows: 100px 200px 100px;

   /* ... */
}

ערבוב יחידות (Mixed Units)

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

קחו גריד של 4 עמודות בתוך container ברוחב 800px. העמודה הראשונה קבועה על 300px, השנייה 10% (80px), ו-420px שנותרו מתחלקים שווה בשווה בין שתי עמודות 1fr – 210px כל אחת:

main {
  width: 800px;
  display: grid;
  grid-template-columns: 300px 10% 1fr 1fr;
  /* 300px 80px 210px 210px */

  grid-template-rows: auto;
}

fr לעומת auto

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

כשמשלבים אותם יחד, עמודות auto מחושבות קודם, ואז עמודות fr מתחלקות במה שנשאר:

grid-template-columns: auto 1fr auto;
/* sidebar | main גמיש | sidebar */

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

fr עם repeat() ו-minmax()

היחידה fr משתלבת היטב עם תבניות גריד רספונסיביות שלא דורשות media queries. שימוש ב-repeat() עם minmax() יוצר גריד שעוטף פריטים לשורה הבאה באופן אוטומטי:

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

כל עמודה רחבה לפחות 250px. כשיש מקום נוסף, המקסימום 1fr מחלק אותו שווה בשווה בין העמודות. ככל שה-viewport מצטמצם, עמודות יורדות לשורה חדשה במקום להידחס מתחת ל-250px.

ההבדל בין auto-fill ל-auto-fit: auto-fill שומר על tracks ריקים כשיש מקום פנוי, בעוד auto-fit מקפל אותם כך שהפריטים הקיימים נמתחים למלא את השורה.

מלכודות נפוצות

fr לא עובד מחוץ ל-Grid. בניגוד ל-% או px, היחידה fr חלה רק על grid-template-columns ו-grid-template-rows. שימוש בה ב-width, margin או Flexbox לא ישפיע.

גלישה עם תוכן גדול. עמודת fr יכולה לגדול מעבר לחלק היחסי שלה אם התוכן לא נכנס. כדי למנוע זאת, השתמשו ב-minmax(0, 1fr) במקום 1fr:

/* ברירת מחדל: fr משתמש בגודל התוכן כמינימום */
grid-template-columns: 1fr 1fr;

/* כפיית מינימום 0 - התוכן יגלוש במקום להרחיב */
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

gaps נספרים לפני fr. התכונה gap מנוכה מהשטח הפנוי לפני חישוב ערכי fr. גריד עם 3 עמודות 1fr 1fr 1fr ו-gap של 20px נותן לכל עמודה (total - 40px) / 3, ולא total / 3.

שאלות נפוצות

סיכום

אני משתמש ביחידה fr כמעט בכל גריד שאני בונה. היא מסירה את הצורך בחישובי אחוזים ומתאימה את עצמה טבעית כשמוסיפים או מסירים עמודות. בשילוב עם px, auto ו-minmax(), היא מכסה את רוב צרכי העימוד ללא media query בודד.