על התכונה Grid Areas של CSS Grid בהרחבה

CSS Grid ממקם פריטים לפי מספרי קווי גריד כברירת מחדל. מגדירים היכן כל אלמנט מתחיל ונגמר באמצעות קואורדינטות מספריות כמו grid-column: 1 / 3.

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

מתן שמות לאיזורים עם התכונה grid-area

הדבר הראשון שיש לעשות הוא להגדיר שמות (כראות עיניכם) לאלמנטים בגריד (Grid Items) באמצעות התכונה grid-area:

.item-1 {
  grid-area: head;
}
.item-2 {
  grid-area: main;
}
.item-3 {
  grid-area: side;
}
.item-4 {
  grid-area: footer;
}

תיאור המתווה באמצעות grid-template-areas

לאחר מכן עליכם להשתמש בתכונה grid-template-areas על הקונטיינר של הגריד כדי להגדיר כיצד אותם איזורים להם סיפקתם שמות ייושמו:

.container {
  display: grid;

  grid-template-columns: 2fr 2fr 1fr 2fr;
  grid-template-rows: 100px 200px 100px;

  grid-template-areas:
    "head head . side"
    "main main . side"
    "footer footer footer footer";
}

הערך של grid-template-areas עובד כמו ASCII art. כל מחרוזת במירכאות מייצגת שורה, וכל מילה מייצגת עמודה.

תו הנקודה (.) מסמן תא ריק. אפשר לשרשר כמה נקודות (.....) לקריאות – הן עדיין נחשבות כתא ריק אחד.

רווחים בין שמות לא משנים. הנה אותה דוגמה בפורמט שונה:

.container {
  /* ... */

  grid-template-areas:
    "head head     .....    side"
    "main main     .....    side"
    "footer footer footer footer";
}

התוצאה של קוד זה תהיה משהו בסגנון הבא:

כעת נשנה את ערך grid-template-areas כדי לקבל מתווה שונה לגמרי – מבלי לגעת בתכונות של ה-grid items. השינוי הזה מדגים כיצד תכונה אחת שולטת במבנה כולו:

.container {
  /* ... */

  grid-template-areas:
    "head head  .    side"
    "main main main  side"
    ". footer footer side";

  /* ... */
}

עימוד רספונסיבי עם Grid Areas

אחד היתרונות הגדולים של Grid Areas בולט כשמוסיפים Media Queries. ניתן לסדר מחדש את כל המתווה על ידי דריסת תכונה אחת:

@media screen and (max-width: 40em) {
  .container {
    grid-template-areas:
      "head head head head"
      "main main main main"
      "side side side side"
      "footer footer footer footer";
  }
}

מיקומי האלמנטים מתארגנים מחדש לעמודה אחת ללא שינוי ב-grid items. הקטינו את הדפדפן כדי לראות את התוצאה:

אפשר גם לבנות עימוד רספונסיבי ללא Media Queries בכלל, באמצעות auto-fill ו-minmax().

כללי שמות ומגבלות

כמה כללים שחשוב לזכור בעבודה עם grid-template-areas:

אזורים חייבים להיות מלבניים. צורות L או T אינן תקינות. הדפדפן יתעלם מכל הצהרת grid-template-areas אם אזור כלשהו יוצר צורה שאינה מלבן.

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

שמות הם case-sensitive. "Header" ו-"header" הם שני אזורים שונים. עדיף להשתמש באותיות קטנות לעקביות.

קווי גריד מרומזים (Implicit Named Lines)

כשמגדירים אזור בעל שם, הדפדפן יוצר אוטומטית קווי גריד סביבו. אזור בשם main מייצר קווים בשם main-start ו-main-end הן לשורות והן לעמודות:

grid-template-areas:
  "header header"
  "main   sidebar"
  "footer footer";

/* קווים אלו נוצרים אוטומטית: */
/* header-start, header-end */
/* main-start, main-end */
/* sidebar-start, sidebar-end */
/* footer-start, footer-end */

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

מתי להשתמש ב-Grid Areas לעומת מספרי קווים

Grid Areas מתאימים בעיקר למתווים ברמת הדף שבהם המבנה ברור וקבוע – header, sidebar, תוכן ראשי ו-footer. תחביר ה-ASCII art הופך את ה-CSS לתרשים קריא.

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

אני נוטה להשתמש ב-Grid Areas למעטפת החיצונית של הדף ובמספרי קווים לגרידים ברמת הרכיב. שתי הגישות יכולות לדור יחד באותו מתווה.

שאלות נפוצות

סיכום

Grid Areas הם הדרך המועדפת עליי להגדיר מתווים ברמת הדף. תחביר ה-ASCII art הופך את ה-CSS עצמו לתרשים של המתווה, מה שחוסך מעבר מתמיד בין קוד לדפדפן כדי להבין מה הולך לאן. בשילוב עם דריסת media query אחת למובייל, זה מכסה את רוב המבנים בעולם האמיתי עם מינימום CSS.