פלקסבוקס מול גריד ב-CSS - איך בוחרים נכון

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

הכלל הזהב שפותר את רוב הבלבול

אם אתם זוכרים רק דבר אחד מהפוסט הזה, שיהיה זה:

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

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

פלקסבוקס - הכלי היומיומי

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

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

שתי התכונות האלה, justify-content ו-align-items, פותרות אולי תשעים אחוז מבעיות היישור שאנשים נתקעים עליהן. אתם רוצים אלמנטים במרכז? align-items: center. אתם רוצים רווח שווה בין פריטים? justify-content: space-between. פלקסבוקס הוא הכלי הראשון שאני שולף בשביל תפריט ניווט, שורת כפתורים, כרטיס עם אייקון וטקסט לידו, או כל דבר שהוא במהותו "שורה של פריטים".

גריד - כשצריך לחשוב במבנה שלם

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

.page {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
}

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

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

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

הדוגמה שממחישה את זה הכי טוב

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

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

איך לתרגל את זה נכון

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

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

לסיכום

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

מתלבטים על פריסה ספציפית? תשתפו אותה בדיסקורד, שם אפשר לקבל עזרה מיידית.

הצטרפו לקהילה בדיסקורד