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

על התכונה Grid Area ו Grid Template Areas בהרחבה.

בעימודים או 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";
}

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

Head
Head 2
Main
Main 2
Side
Footer

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

.container {
  /* ... */

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

  /* ... */
}
Head
Main
Side
Footer

מה לגבי רספונסיביות ו 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";
  }
}

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

Head
Main
Side
Footer

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

 

Thanks to Alligator.io for the post.

רועי יוסף
רועי יוסף

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

0תגובות...

השאירו תגובה

Up!