מזהה GRid

The CSS Podcast – 011: Grid

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

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

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

סקירה כללית

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

1. אפשר להגדיר רשת עם שורות ועמודות. אתם יכולים לבחור את הגודל של הטראקים האלה בשורות ובעמודות, או שהם יכולים להגיב לגודל התוכן.
2. הצאצאים הישירים של מאגר התמונות יוצגו באופן אוטומטי בתצוגת התמונות.
3. לחלופין, אפשר למקם את הפריטים במיקום המדויק הרצוי.
4. אפשר לתת שמות לקווים ולאזורים ברשת כדי להקל על מיקום הרכיבים.
5. אפשר לחלק את המרחב הפנוי בקונטיינר של התצוגה הראשית בין הטראקים.
6. אפשר ליישר את הפריטים בתוך הרשת.

מונחים של רשת

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

קווי רשת

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

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

טראקים ברשת

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

תא רשת

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

אזור הרשת

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

פערים

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

מאגר רשת

רכיב ה-HTML שבו הוחל display: grid, וכתוצאה מכך נוצר הקשר חדש של עיצוב רשת לצאצאים הישירים.

.container {
  display: grid;
}

פריט ברשת

פריט רשת הוא פריט שהוא צאצא ישיר של קונטיינר הרשת.

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

שורות ועמודות

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

.container {
    display: grid;
    grid-template-columns: 5em 100px 30%;
    grid-template-rows: 200px auto;
    gap: 10px;
}

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

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

שכבת-העל של התצוגה בתצוגת רשת ב-Chrome DevTools יכולה לעזור לכם להבין את החלקים השונים של התצוגה.

פותחים את הדמו ב-Chrome. בודקים את הרכיב עם הרקע האפור, שמזהה שלו הוא container. כדי להדגיש את התצוגה של הרשת, בוחרים את תג הרשת ב-DOM, לצד הרכיב .container. בכרטיסייה Layout (פריסה), בוחרים באפשרות Display Line Numbers (הצגת מספרי שורות) בתפריט הנפתח כדי לראות את מספרי השורות בתצוגת הרשת.

מילות מפתח לבחירת גודל ברירת המחדל

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

• min-content
• max-content
• fit-content()

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

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

הפונקציה fit-content() פועלת כמו max-content בהתחלה. עם זאת, כשהטראק מגיע לגודל שעברתם לפונקציה, התוכן מתחיל להסתובב. לכן, הפונקציה fit-content(10em) תיצור טראק שגודל שלו קטן מ-10em, אם הגודל של max-content קטן מ-10em, אבל אף פעם לא גדול מ-10em.

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

היחידה fr

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

היחידה fr פועלת באופן דומה לשימוש ב-flex: auto ב-flexbox. הוא מחלק את הרווחים אחרי שמיקמים את הפריטים. לכן, כדי ליצור שלוש עמודות שכל אחת מהן מקבלת את אותו חלק מהמרחב הפנוי:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

מכיוון שיחידה מסוג fr מחלקת את המרחב הזמין, אפשר לשלב אותה עם פער בגודל קבוע או עם טראקים בגודל קבוע. כדי ליצור רכיב עם רכיב בגודל קבוע, שבו הטראק השני תופס את כל המקום שנותר, אפשר להשתמש ב-grid-template-columns: 200px 1fr כרשימת טראקים.

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

הפונקציה minmax()

הפונקציה הזו מאפשרת להגדיר גודל מינימלי ומקסימלי לטראק. האפשרות הזו יכולה להיות שימושית מאוד. אם ניקח את הדוגמה של היחידה fr שלמעלה, שמחלקת את המקום שנותר, אפשר לכתוב אותה באמצעות minmax() כ-minmax(auto, 1fr). כשמשתמשים בתצוגת רשת, המערכת בוחנת את הגודל הפנימי של התוכן ומחלקת את המקום הזמין אחרי שהיא משאירה מספיק מקום לתוכן. כלומר, יכול להיות שלא תקבלו טראקים שכל אחד מהם מקבל חלק שווה מכל המרחב הזמין בקונטיינר של התצוגה.

כדי לאלץ טראק לתפוס חלק שווה במרחב בקונטיינר של התצוגה בחלונית, בניכוי הרווח בין הטראקים, משתמשים ב-minmax. מחליפים את 1fr כגודל הטראק ב-minmax(0, 1fr). כך הגודל המינימלי של הטראק הוא 0 ולא גודל התוכן המינימלי. לאחר מכן, המערכת של Grid תשתמש בכל המקום הזמין בקונטיינר, תבטל את המקום שנחוץ למרווחים ותחלק את השאר בהתאם ליחידות ה-fr.

סימון repeat()

אם רוצים ליצור רשת של 12 טראקים עם עמודות באותו גודל, אפשר להשתמש בקוד ה-CSS הבא.

.container {
    display: grid;
    grid-template-columns:
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr);
}

אפשר גם לכתוב את זה באמצעות repeat():

.container {
    display: grid;
    grid-template-columns: repeat(12, minmax(0,1fr));
}

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

.container {
    display: grid;
    grid-template-columns: 200px repeat(2, 1fr 2fr) 200px; /*creates 6 tracks*/
}

auto-fill וגם auto-fit

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

אפשר לעשות זאת באמצעות repeat() ומילות המפתח auto-fill או auto-fit. בהדגמה הבאה, התצוגה בתצוגת רשת תיצור כמה טראקים בגודל 200 פיקסלים שיתאימו לקונטיינר. פותחים את הדמו בחלון חדש ומבחינים בשינויים ברשת כשמשנים את גודל אזור התצוגה.

בדמו נוכל להוסיף כמה טראקים שאפשר. עם זאת, הטראקים לא גמישים. תהיה פער בסוף עד שיהיה מספיק מקום לטראק נוסף של 200 פיקסלים. אם מוסיפים את הפונקציה minmax(), אפשר לבקש כמה טראקים שאפשר, בגודל מינימלי של 200 פיקסלים ובגודל מקסימלי של 1fr. לאחר מכן, המערכת של התצוגה בחלוקה לרשת תציב את הטראקים בגודל 200 פיקסלים, והרווח שנותר יחולק ביניהם באופן שווה.

כך נוצרת פריסה רספונסיבית דו-ממדית ללא צורך בשאילתות מדיה.

יש הבדל קל בין auto-fill לבין auto-fit. בדמו הבא נשתמש בפריסת רשת באמצעות התחביר שמוסבר למעלה, אבל עם שני פריטים בלבד בקונטיינר של הרשת. באמצעות מילת המפתח auto-fill אפשר לראות שנוצרו טראקים ריקים. משנים את מילת המפתח ל-auto-fit והטראקים מתכווצים לגודל 0. פירוש הדבר הוא שהטראקים הגמישים גדלים עכשיו כדי לנצל את כל המרחב.

מילות המפתח auto-fill ו-auto-fit פועלות באופן זהה בכל שאר המקרים. אין הבדל ביניהם אחרי שהטראק הראשון מתמלא.

מיקום מודעות אוטומטי

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

הצבת פריטים בעמודות

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

הערכים האלה קשורים למצב הכתיבה של המסמך. שורה תמיד נמשכת בכיוון שבו משפט נמשך במצב הכתיבה של המסמך או הרכיב. בדמו הבא תוכלו לשנות את הערך של grid-auto-flow ואת המאפיין writing-mode.

טראקים שמשתרעים על פני כמה ימים

אתם יכולים לגרום לחלק מהפריטים או לכל הפריטים בפריסה שמוגדרת באופן אוטומטי להשתרע על יותר מתעקף אחד. משתמשים במילות המפתח span וגם במספר השורות שרוצים להציג כערך של grid-column-end או grid-row-end.

.item {
    grid-column-end: span 2; /* will span two lines, therefore covering two tracks */
}

מכיוון שלא ציינתם ערך של grid-column-start, המערכת תשתמש בערך הראשוני של auto והמודעה תוצג בהתאם לכללי מיקום המודעות האוטומטי. אפשר לציין את אותו הדבר גם באמצעות קיצור הדרך grid-column:

.item {
    grid-column: auto / span 2;
}

השלמת פערים

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

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

הצבת פריטים

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

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

המאפיינים שבהם אפשר להשתמש כדי למקם פריטים לפי מספר שורה הם:

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end

יש להם קיצורי דרך שמאפשרים להגדיר גם את שורת ההתחלה וגם את שורת הסיום בבת אחת:

• grid-column
• grid-row

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

.container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 200px 100px);
}

.item {
    grid-column-start: 1; /* start at column line 1 */
    grid-column-end: 4; /* end at column line 4 */
    grid-row-start: 2; /*start at row line 2 */
    grid-row-end: 4; /* end at row line 4 */
}

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

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

יצירת ערימות של פריטים

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

מספרי שורות שליליים

כשיוצרים רשת באמצעות grid-template-rows ו-grid-template-columns, יוצרים את מה שנקרא רשת מפורשת. זוהי רשת שהגדרתם והקציתם לה גודל.

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

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

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

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

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

הגדרת הגודל של טראקים משתמעים

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

כדי ליצור את כל השורות המשתמעות בגודל מינימלי של 10em ובגודל מקסימלי של auto:

.container {
    display: grid;
    grid-auto-rows: minmax(10em, auto);
}

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

.container {
    display: grid;
    grid-auto-columns: 100px 200px;
}

קווי רשת עם שם

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

.container {
    display: grid;
    grid-template-columns:
      [main-start aside-start] 1fr
      [aside-end content-start] 2fr
      [content-end main-end]; /* a two column layout */
}

.sidebar {
    grid-column: aside-start / aside-end;
    /* placed between line 1 and 2*/
}

footer {
    grid-column: main-start / main-end;
    /* right across the layout from line 1 to line 3*/
}

אזורים בתבנית של רשת

אפשר גם לתת שמות לאזורים ברשת ולמקם בהם פריטים. זו טכניקה נהדרת כי היא מאפשרת לכם לראות איך הרכיב נראה ישירות ב-CSS.

כדי להתחיל, נותנים שם לצאצאים הישירים של מאגר התמונות באמצעות הנכס grid-area:

header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.content {
    grid-area: content;
}

footer {
    grid-area: footer;
}

השם יכול להיות כל מה שתרצו, מלבד מילות המפתח auto ו-span. אחרי שמעניקים שמות לכל הפריטים, משתמשים במאפיין grid-template-areas כדי להגדיר את התאים שבהם כל פריט יתפרס. כל שורה מוגדרת בתוך מירכאות.

.container {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-areas:
        "header header header header"
        "sidebar content content content"
        "sidebar footer footer footer";
}

יש כמה כללים לשימוש ב-grid-template-areas.

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

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

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

.container {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-areas:
        "....... header header header"
        "sidebar content content content"
        "sidebar footer footer footer";
}

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

אפשר גם לראות איך נכס grid-template-areas קשור ל-writing-mode ולכיוון, כמו בשיטות אחרות של רשת.

מאפיינים מקוצרים

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

grid-template

המאפיין grid-template הוא קיצור דרך למאפיינים grid-template-rows, ‏ grid-template-columns ו-grid-template-areas. השורות מוגדרות קודם, יחד עם הערך של grid-template-areas. הוספת גודל העמודה מתבצעת אחרי /.

.container {
    display: grid;
    grid-template:
      "head head head" minmax(150px, auto)
      "sidebar content content" auto
      "sidebar footer footer" auto / 1fr 1fr 1fr;
}

מלון אחד (grid)

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

• grid-template-rows
• grid-template-columns
• grid-template-areas
• grid-auto-rows
• grid-auto-columns
• grid-auto-flow

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

.container {
    display: grid;
    grid: repeat(2, 80px) / auto-flow  120px;
}

יישור

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

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

• justify-content ו-align-content: מחלקים את המרחב הנוסף בקונטיינר של התצוגה לרשת סביב הטראקים או ביניהם.
• justify-self ו-align-self: פריטים שחלים על פריט ברשת כדי להזיז אותו בתוך אזור הרשת שבו הוא ממוקם.
• justify-items ו-align-items: חלים על מאגר התצוגה הניראית כדי להגדיר את כל המאפיינים justify-self בפריטים.

חלוקת נפח אחסון נוסף

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

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

העברת תוכן

פריטים עם צבע רקע נראים כאילו הם ממלאים לחלוטין את אזור התצוגה שלהם, כי הערך הראשוני של justify-self ו-align-self הוא stretch.

בדמו, משנים את הערכים של justify-items ו-align-items כדי לראות איך הם משנים את הפריסה. גודל אזור התצוגה לא משתנה, אלא הפריטים מועברים בתוך האזור המוגדר.

בדיקת ההבנה

בודקים את הידע שלכם על רשתות

main {
  display: grid;
}

משאבים

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

• פריסת רשת ב-CSS ב-MDN
• מדריך מלא לשימוש ב-Grid
• יצירת מאגר תגים מסוג Grid
• בדיקת רשת CSS בכלי הפיתוח ל-Chrome
• אוסף מקיף של חומרים ללמידה על רשתות