מדריך CSS יחידת פריסה יחידה

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

כמו יחידת שבר הוצג יחד עם מודול פריסה רשת, אתה יכול להשתמש בו בכל דפדפן זה תומך ברשת ה- CSS. אם אתה רוצה גם לתמוך בדפדפנים ישנים הנה נהדר רשת polyfill CSS זה מאפשר לך להשתמש לא רק fr יחידה אבל תכונות אחרות ברשת גם כן.

שימוש בסיסי

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

HTML השייך עשוי שישה דיסקים מסומן עם .קופסא מעמד, בתוך א .עטיפה div.

 
 
1.
 
2.
 
3.
 
4.
 
5.
 
6.
 
 

כדי להשתמש במודול פריסת הרשת, עליך להוסיף את תצוגה: רשת; מאפיין CSS לעטיפה. ה רשת-תבנית-עמודות רכוש משתמש fr יחידה כערך; ה היחס בין שלוש העמודות הוא 1: 1: 1.

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

ה רשת פער נכס מוסיף רשת 10px בין הקופסאות. אם אתה לא רוצה שום פער רק להסיר את הנכס הזה.

 .wrapper display: grid; grid-template-columns: 1fr 1fr 1fr; רשת-תבנית שורות: 200px 200px; grid-gap: 10px;  .box color: white; text-align: center; font-size: 30px; ריפוד: 25px;  

שים לב CSS לעיל אינו מכיל כמה סגנון בסיסי כגון צבעי רקע. אתה יכול מצא את הקוד המלא בהדגמה בסוף המאמר.

שינוי יחס

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

אני גם הגדילה את הערך של רשת פער כך שתוכל לראות כיצד הוא משנה את הפריסה. בעיקרון, הדפדפן מנכה את פער הרשת מרוחב התצוגה (בדוגמה זו, פערים הרשת להוסיף עד 80px), ו פרוסות את השאר על פי שברים נתון.

 .wrapper display: grid; grid-template-columns: 1fr 2fr 1fr; רשת-תבנית שורות: 200px 200px; grid-gap: 40px;  

שלב fr עם יחידות CSS אחרות

אתה יכול לשלב ה fr יחידה עם כל יחידות CSS אחרות גם כן. לדוגמה, בדוגמה הבאה, השתמשתי 60% 1fr 2fr יחס עבור הרשת שלי.

אז, איך זה עובד? ה הדפדפן מקצה את 60% מרוחב התצוגה אל העמודה הראשונה. לאחר מכן, הוא מחלק את שארית החלל לשברים של 1: 2.

אותו דבר יכול גם להיות כתוב כמו 60% 13.33333% 26.66667%. אבל בכנות, למה שמישהו ירצה להשתמש בפורמט הזה? יתרון עצום של יחידת השבר הוא זה משפר את הקריאות קוד. יתר על כן, זה מדויק לחלוטין, כמו פורמט אחוז עדיין מוסיף רק 99.9999%.

 .wrapper display: grid; רשת תבנית-עמודות: 60% 1fr 2fr; רשת-תבנית שורות: 200px 200px; grid-gap: 10px;  

מלבד אחוזים, ניתן גם להשתמש ביחידות CSS אחרות יחד עם יחידת השבר, למשל pt, px, em, ו rem.

הוסף רווח לבן עם fr

מה אם אתה לא רוצה העיצוב שלך להיות עמוס ו להוסיף קצת רווח לבן לרשת שלך? יחידת השבר יש גם פתרון קל עבור זה.

כפי שאתם יכולים לראות, רשת זו יש עמודה ריקה בעוד היא עדיין שומרת על כל שש הקופסאות. עבור פריסה זו, אנחנו צריכים לחתוך את החלל לתוך ארבע עמודות במקום שלושה. אז, אנחנו משתמשים 1fr 1fr 1fr ערך עבור רשת-תבנית-עמודות נכס.

אנו מוסיפים את העמודה הריקה בתוך רשת-תבנית-אזורים רכוש, באמצעות סימון נקודה. בעיקרון, תכונה זו מאפשרת לך התייחסות אזורים בשם רשת. בנוסף, אתה יכול שם אזורים עם רשת אזור רשת רכוש שבו אתה צריך להשתמש בנפרד לכל אזור.

 .wrapper display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; רשת-תבנית שורות: 200px 200px; grid-gap: 10px; grid-template-areas: "box-1 box-2. box-3" "box-4 box-5. box-6"; . box-1 grid-area: box-1; . box-2 grid-area: box-2;  .box-3 grid-area: box-3; . box-4 grid-area: box-4; . box-5 grid-area: box-5;  .box-6 grid-area: box-6;  

שטחים לבנים לא בהכרח צריך ליצור טור, הם יכול להיות בכל מקום ברשת.

ה חזור() פונקציה

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

 .wrapper display: grid; רשת תבנית עמודות: לחזור (3, 1fr); / * רשת תבנית-עמודות: 1fr 1fr 1fr; * / grid-template-rows: 200px; grid-gap: 10px;  

ה חזור (3, 1fr) תחביר תוצאות באותה פריסה כפי ש 1fr 1fr. הפריסה שלהלן זהה לדוגמה הראשונה.

אם אתה להגדיל את מכפיל בתוך ה חזור() פונקציה יהיו לך יותר עמודות. לדוגמה, חזור (6, 1fr) תוצאות ב שש עמודות שוות. במקרה זה, כל הקופסאות שלנו יהיה באותה שורה, כלומר, זה מספיק כדי להשתמש רק ערך אחד (200px) עבור רשת-תבנית שורות נכס.

 .wrapper display: grid; רשת תבנית עמודות: לחזור (6, 1fr); grid-template-rows: 200px; grid-gap: 10px;  

אתה יכול להשתמש חזור() יותר מפעם אחת. לדוגמה, הדוגמה הבאה גורמת לרשת שבה שלוש העמודות האחרונות הן פעמיים רחב כמו שלושת הראשונים.

 .wrapper display: grid; רשת תבנית עמודות: לחזור (3, 1fr) לחזור (3, 2fr); grid-template-rows: 200px; grid-gap: 10px;  

אתה יכול גם לשלב חזור() עם יחידות CSS אחרות. למשל, אתה יכול להשתמש 200px לחזור (4, 1fr) 200px כקוד חוקי.

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

הדגמה לניסוי

סוף כל סוף, הנה ההדגמה שהבטחתי. הוא משתמש באותו קוד כמו בדוגמה הראשונה במאמר זה. מזלג בו, ולראות מה אתה יכול להשיג עם fr יחידה.