הבעיה עם אחוזים ב-CSS

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

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

דוגמה לרשת פשוטה מאוד

כדי להדגים בעיה ביחידות אחוז, שקול את פריסת ה-HTML הזו:

<divמעמד="מְכוֹלָההרשת שלי">
 <divמעמד="פריט רשת">
div>
 <divמעמד="פריט רשת">
div>
div>

האלמנט החיצוני הוא יסוד div אלמנט מיכל עם שניים div יְלָדִים. לכל ילד יש א פריט רשת מעמד. כדי להפוך את המיכל לרשת עם שתי עמודות (שתי תיבות), נצטרך להחיל את קוד ה-CSS הבא:

גוּף {
צבע רקע: שָׁחוֹר;
align-items: מֶרְכָּז;
להצדיק-תוכן: flex-start;
}
.my-grid {
לְהַצִיג: רֶשֶׁת;
עמודות-תבנית-רשת: 50% 50%;
שולים: 3rem;
גבול: 2פיקסליםמוצקזהב;
ריפוד: 1rem;
}
.grid-item {
גבול: 3פיקסליםמוצקזהב;
ריפוד: 10rem 0;
רקע כללי: כְּחוֹל;
}

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

הנה התוצאה:

אבל יש בעיות עם היישור הזה. ראשית, אם החלטת להוסיף א פער להורה ברשת, הילד יכול לעלות על גדותיו מהצד. למשל, אם הייתם מוסיפים פער: 3 פיקסלים אל ה .my-grid לחסום ב-CSS, אז כך תיראה הפריסה:

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

בכל פעם שאתה משתמש באחוזים ומוסיף שוליים או פערים, יש סיכוי עצום לחוות שגיאות מסוג זה. אבל למה השגיאה מתרחשת?

זה בגלל שכל עמודה היא 50% מההורה. בדוגמה שלמעלה, יש לנו 50% פלוס 50% פלוס הפער הזה (3 פיקסלים), שדוחף את הקופסה אל מחוץ לקונטיינר.

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

הפתרון עם ערכים שברים

הפתרון הוא להשתמש בערכים שברים במקום באחוזים. אז במקום להגדיר את העמודה הראשונה ל-75% ואת השנייה ל-50%, אתה יכול להגדיר את העמודה הראשונה ל-3fr ואת העמודה השנייה ל-1fr:

עמודות-תבנית-רשת: 3fr 1fr

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

יתרון נוסף של שימוש ב-frs על פני אחוזים - או אחר יחידות מוחלטות, כמו px או em— זה שאתה יכול לשלב אותם עם ערכים קבועים. הנה דוגמה:

עמודות-תבנית-רשת: 1fr 10rem;

עם הקוד שלמעלה, תקבל ערך קבוע שלעולם לא משתנה ללא קשר לגודל המסך. הסיבה לכך היא שהעמודה מימין תישאר תמיד ב-10rem בעוד שהעמודה משמאל תתפוס את החלל הנותר (מינוס הפער).

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

דוגמה מציאותית יותר

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

.מְכוֹלָה {
רוֹחַב: 100%;
לְהַצִיג: רֶשֶׁת;
עמודות-תבנית-רשת: 3fr 1fr;
פער: 1.5 רמ;
}
.כַּרְטִיס {
צבע רקע: #5A5A5A;
ריפוד: 10פיקסלים;
שוליים-תחתית: .5 רמ;
}

הנה התוצאה:

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

כך תוכל לערום הכל בעמודה כאשר נקודת התצוגה מגיעה ל-55em או פחות:

@כְּלֵי תִקְשׁוֹרֶת(מקסימום רוחב: 55em) {
.מְכוֹלָה {
לְהַצִיג: לְהַגמִישׁ;
כיוון הגמיש: טור;
 }
}

והתוצאה תיראה בערך כך:

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

.sidebar-grid {
לְהַצִיג: רֶשֶׁת;
עמודות-תבנית-רשת: חזור(התאמה אוטומטית, מינימום מקסימום(25rem, 1fr));
align-content: הַתחָלָה;
פער: 2rem;
}

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

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

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

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

למידע נוסף על CSS Grid

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

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