רשת משנה של 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 ו-System תנועות.

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

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

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

כלי פיתוח

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

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

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

משאבים

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