רשת משנה של CSS

תאריך פרסום: 28 בספטמבר 2023

CSS grid הוא מנוע פריסה חזק מאוד, אבל אפשר להשתמש במסלולי השורות והעמודות שנוצרים ב-CSS grid הורה רק כדי למקם צאצאים ישירים של מאגר התצוגה של ה-CSS grid. כל הקווים והאזורים ששמותיהם מופיעים ברשת שהוגדרו על ידי המחבר אבדו בכל רכיב אחר מלבד צאצא ישיר. בעזרת 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. אין ערכים שליליים או טריקים, אלא שורה אחת יפה עם הכיתוב "my layout spans from fullbleed-start to 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 יש כלים מעולים ל-DevTools של רשתות CSS, ולדפדפנים Chrome,‏ Edge ו-Firefox יש כלים ספציפיים שיעזרו לכם עם רשתות משנה. הכלי של Chrome הוכרזו בגרסה 115, ואילו ב-Firefox הם זמינים כבר שנה או יותר.

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

משאבים

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

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