רשת משנה של CSS

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

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

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

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

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

תמיכה בדפדפן

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

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

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

צילום מסך מוגדל של שכבת-העל של הרשת מ-DevTools, תוך התמקדות בשמות העמודות מסוג 'התחלה מלאה' ו'כותרת מלאה'.

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

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

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

מקורות מידע

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

חלק מהסדרה החדשה של יכולת פעולה הדדית