היחידה Fr ב CSS Grid

CSS Grid הביא איתו לעולם יחידת מידה חדשה. זו בעצם יחידה פלקסבילית מסוג חדש בשם Fr unit. משמעו של Fr הוא Fractional Unit כש 1fr מייצג חלק 1 מסך השטח הפנוי.

תכף אציג שתי דוגמאות לשימוש ב fr unit, רק לפני כן נציין כי האלמנטים עצמם (ה- grid items) בדוגמאות אלו מונחות על הגריד באמצעות התכונה 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 שונים. שימו לב לשינוי במתווה (ב layout):

.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

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

למשל, אם ברשותינו גריד בעל 4 עמודות כמו בסניפט הבא, העמודה הראשונה תהיה 300px, השנייה תהיה 80px (כלומר 10% מ- 800), והעמודה השלישית והרביעית יהיו כל אחת 210px כשכל אחת מהן תופסת חצי מהשטח שנשאר:

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

  grid-template-rows: auto;
}

This post is completely translated from the following alligator.io post.