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";
}
כל אחת מארבעת העמודות תופסות את אותו מקום בגריד.
דוגמאות לשימוש ב fr
הנה אותו דוגמה כמו הדוגמה מעלה עם ערכי fr שונים. שימו לב לשינוי במתווה (ב layout):
בדוגמה האחרונה ה sidebar מכסה 2fr מהשטח, כך שהוא יהיה באותו רוחב כמו האלמנטים הממלאים את העמודה הראשונה והשנייה:
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.
