Search

היחידה Fr ב CSS Grid

CSS Grid הביא איתו לעולם יחידת מידה חדשה. זו בעצם flexible unit מסוג חדש בשם 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";
}

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

Head
Head 2
Main
Main 2
Side
Footer

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

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

הנה אותו דוגמה כמו הדוגמה מעלה עם ערכי fr שונים. שימו לב לשינוי במתווה (ב layout):

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

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

   /* ... */
}
Head
Head 2
Main
Main 2
Side
Footer

בדוגמה האחרונה ה sidebar מכסה 2fr מהשטח, כך שהוא יהיה באותו רוחב כמו האלמנטים הממלאים את העמודה הראשונה והשנייה:

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

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

   /* ... */
}
Head
Head 2
Main
Main 2
Side
Footer

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.

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

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

0 תגובות...

תגובה חדשה

Up!
לבלוג
הפוסט עודכן לאחרונה