רשת משנה של CSS

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

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

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

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

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

תמיכה בדפדפנים

  • Chrome:‏ 117.
  • Edge:‏ 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 של רשת מאקרו לפריסת דף לנייד. לקווים יש שמות ויש אזורים ברורים למיקום הרכיבים.

צילום מסך מכלי הפיתוח לרשת CSS ב-Chrome, שבו מוצגת פריסת רשת בגודל נייד, שבה השמות של השורות והעמודות מאפשרים זיהוי מהיר: fullbleed, system-status, Primary-nav, primary-header, primary, footer ותנועות מערכת.

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

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

צילום מסך של שכבת-העל של הרשת בכלי הפיתוח, שמתמקד במיוחד בשמות העמודות מסוג fullbleed-start ו-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;
}
פריסת המאקרו הסופית, שכוללת תמונה בתוך שורה ברוחב מלא שמוצבת בצורה תקינה את שורות הניווט והכותרת הראשיות, ומתרחבת לכל אחת משורות העמודה בעלות השם המלא.
https://codepen.io/web-dot-dev/pen/WNLyjzX

זהו, רשת מאקרו כמו שהמעצבים משתמשים בה, מוטמעת ב-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 קיימים כבר שנה או יותר.

צילום מסך של תג רשת המשנה שנמצא ברכיבים בחלונית הרכיבים.

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

משאבים

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