רשת משנה של CSS

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

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

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

יסודות של רשת משנה

הנה תרחיש לדוגמה פשוט שמציג את העקרונות הבסיסיים של 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 */
}

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

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

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

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

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

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

שירות ה-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];
}

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

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

כשפריסת המכשיר הכוללת נוצרה עם שורות ועמודות יפות עם שמות, כדאי להשתמש ב-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;
}

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

חיפוש תמיכה

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

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

כלי פיתוח

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

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

משאבים

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

• MDN
• Rachel Andrew עם כתוביות מותאמות
• רייצ'ל אנדרו עם 10 דוגמאות מעולות
• רייצ'ל אנדרו עם אתר של דוגמאות
• המאמר של Ahmad Shadeed
• Michelle Barker בכנס CSS Day 2022
• כרטיסים
  • Codepen by Jhey
  • Codepen מאת Ahmad Shadeed
  • Codepen מאת Takeshi Kano
  • Codepen של Arvid
  • Codepen by Chris Coyier
  • Codepen של מרים סוזאן
• כריס קויייר עם טפסים
• Facundo Corradini עם התאמת טפסים
• כריס קויייר (Chris Coyier) עם סימון פריטים ברשימה באותו קו
• Michelle Barker popping out of container to align with parent grid
• מרים סוזאן מציגה שמות של שורות עם שמות ואינטראקציות בתת-רשת
• Kevin Powell עם עקרונות בסיסיים של אזורים עם שם
• Kevin Powell עם רשימות מותאמות
• שאנון מולר עם רשימות מיושרות
• קווין פאוול עם רשת ברמת הדף שמועברת לרכיבים
• Elad Shechter עם שכבת-על של devtool וחלופה
• Aaron Iker משתמש בצורה יפה בתת-מרשת לטיפוגרפיה כדי ליישר את השורה הבסיסית של הערות שוליים
• אדם ארגייל עם תמונה בגלישה מלאה בתוך כתבה