רשת משנה של CSS

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

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

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

אחרי תת-הרשת, ניתן ליישר את התוכן בגדלים השונים.

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

תמיכה בדפדפן

  • Chrome: 117.
  • קצה: 117.
  • Firefox: 71.
  • Safari: 16.

מקור

מידע בסיסי בנושא רשת משנה

לפניכם תרחיש פשוט לדוגמה שמציג את העקרונות הבסיסיים של CSS subgrid. א' לרשת מוגדרת שתי עמודות בעלות שם, הראשונה היא ברוחב של 20ch והשנייה הוא "השאר" של המרחב המשותף 1fr. שמות העמודות לא נדרשים, אבל הוא שימושי למטרות המחשה וחינוך.

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: [column-1] 20ch [column-2] 1fr;
}

לאחר מכן, צאצא של הרשת הזו, שמתפרס על שתי העמודות האלה, מוגדר כמאגר רשת, ומאמצת את העמודות של ההורה על ידי הגדרה של grid-template-columns subgrid.

.grid > .subgrid {
  grid-column: span 2;

  display: grid;
  grid-template-columns: subgrid; /* 20ch 1fr */
}
צילום מסך של כלי הפיתוח לרשת CSS, שבו מוצגות שתי עמודות זו לצד זו עם שם בתחילת שורת העמודות שלהן.
https://codepen.io/web-dot-dev/pen/NWezjXv

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

האתגר! חוזרים על אותה הדגמה (אבל עושים זאת עבור grid-template-rows).

שיתוף 'מאקרו' ברמת הדף רשת

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

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

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

הנה צילום מסך של כלי הפיתוח ל-Chrome במאקרו של פריסת דף לנייד רשת. לקווים יש שמות ויש אזורים ברורים למיקום הרכיבים.

צילום מסך מ-DevTools של Chrome CSS grid שבו מוצגת פריסה של רשת בגודל לנייד, שבה השורות והעמודות נקראות בשמות לזיהוי מהיר: fullbleed,‏ system-status,‏ primary-nav,‏ primary-header,‏ main,‏ footer ו-system-gestures.

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

.device {
    display: grid;
    grid-template-rows:
      [system-status] 3.5rem
      [primary-nav] 3rem
      [primary-header] 4rem
      [main] auto
      [footer] 4rem
      [system-gestures] 2rem
    ;
    grid-template-columns: [fullbleed-start] 1rem [main-start] auto [main-end] 1rem [fullbleed-end];
}

כמה סגנונות נוספים מאפשרים את העיצוב הבא.

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

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

צילום מסך עם זום של שכבת-העל של הרשת מ-DevTools, שמתמקד במיוחד בשמות העמודות fullbleed-start ו-fullbleed-end.

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

.device > .app,
.app > * {
    display: grid;
    grid: subgrid / subgrid;

    /* same as */
    grid-template-rows: subgrid;
    grid-template-columns: subgrid;
}

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

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

.app > main img {
    grid-area: fullbleed;
}
פריסת המאקרו הסופית, שכוללת תמונה מקוננת ברוחב מלא שמוצבת בצורה תקינה את שורות הניווט והכותרת הראשיות, ומתרחבת לכל אחת משורות העמודה בעלות השם המלא.
https://codepen.io/web-dot-dev/pen/WNLyjzX

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

חיפוש תמיכה

התכונה 'שיפור הדרגתי' באמצעות CSS ו-Subgrid היא מוכרת ופשוטה. משתמשים ב-@supports ובתוך הסוגריים שואלים את הדפדפן אם הוא מבין שרגולטור משנה הוא ערך של שורות או עמודות בתבנית. בדוגמה הבאה בודקים אם המאפיין grid-template-columns תומך במילות המפתח subgrid. אם התוצאה היא true, סימן שאפשר להשתמש ברשת משנה.

@supports (grid-template-columns: subgrid) {
  /* safe to enhance to */
}

Devtools

ל-Chrome, Edge, Firefox ו-Safari יש כלי פיתוח מעולים לרשת CSS, וגם Chrome, ל-Edge ו-Firefox יש כלים ספציפיים לעזרה ברשת משנה. הכרזה על Chrome את הכלים 115 ואז הם שמורים ב-Firefox כבר שנה או יותר.

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

תג המשנה פועל כמו תג הרשת, אבל מבחינה חזותית רשתות הן תת-רשתות, ולאילו לא.

משאבים

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