היחידה 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

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

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

Head
Head 2
Main
Main 2
Side
Footer

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

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!
לבלוג