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

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

התכונה Grid Area היא אלטרנטיבה לקביעת קווי הגריד ומציעה דרך שֵׁמִית בה ניתן לתת שמות לאיזורים בגריד כך שהאלמנטים יתאימו עצמם בקלות לאיזורים לפי אותם שמות. זה אולי מעט מבלבל בתחילה אך מהר מאד תבינו כי לא ניתן להתעלם מהכח שהתכונה  Grid Areas מאפשרת.

מתן שמות לאיזורים עם התכונה 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. כל סקשיין בתוך סוגריים כפולות מייצג שורה, וכל מילה מייצגת עמודה. הסימן נקודה ( . ) משמש עבור תא ריק בגריד ובאפשרותכם להשתמש במספר נקודות רציפות לטובת הנוחות.

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

.container {
  /* ... */

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

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

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

.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";
  }
}

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

אפרופו Media Queries – תנו מבט בפוסט מגניב על עימוד רספונסיבי ללא Media Queries…

Thanks to Alligator.io for the post.