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

לפני כמה שנים, התיישבתי לבנות דאשבורד. שום דבר מיוחד — רק סרגל צד קבוע, אזור תוכן מרכזי ופוטר. Flexbox נראה כמו הבחירה המובנת מאליה, ובהתחלה הוא עבד כצפוי. ואז הכנסתי שורה של כרטיסים לחלק המרכזי. כל הפריסה קרסה. ביליתי את שלוש השעות הבאות בקרב עם יחסי flex-grow ורוחבי אחוזים מקוננים, צופה בקונטיינרים מסרבים להסתדר בשורה לא משנה כמה padding הפחתתי. הדף הרגיש כמו מגדל שעומד ליפול.

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

ההבדל הוא ממדי

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

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

Flexbox עדיין מצדיק את קיומו

אל תמהרו להחליף כל קונטיינר flex ב-Grid. בתוך רכיבים בודדים, Flexbox הוא לרוב נקי וישיר יותר. אם יש לכם פוטר של כרטיס עם שני כפתורים ואתם רוצים אחד מיושר לשמאל ואחד לימין, justify-content: space-between עושה בדיוק את מה שאתם מתכוונים אליו. אם אתם צריכים למרכז אייקון אנכית בתוך כפתור בגובה לא ידוע, align-items: center הוא הדרך הפשוטה ביותר. תוכן משתנה — כמו שורה של תגיות משתמש עם אורכי שמות שונים — מתאים בנוחות בתוך Flexbox כי הוא מבוסס תוכן (content-first). הקונטיינר מסתגל למה שהוא מכיל.

Grid הוא מבוסס קונטיינר (container-first). אתם אומרים לדפדפן כמה מסלולים קיימים וכמה גדולים הם

הראשון הוא שימוש לא מדויק ביחידות. אם תגדיר grid-template-columns: 1fr 1fr 1fr אך העיצוב שלך זקוק לשתי עמודות תוכן בלבד, המסלול השלישי הזה עדיין יהיה קיים. הוא יהיה ריק וייצור רווח שלא ציפית לו, או שהוא יכריח את התוכן האמיתי שלך להידחס בדרכים שישבשו את העיצוב שלך. פעל במודעות. כשאתה מתכוון לשתי עמודות, כתוב repeat(2, 1fr).