מזהה 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;
}

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

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

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

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

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

מילות מפתח למדידת ביצועים מהותיים

בנוסף למאפייני האורך והאחוז כפי שמתואר בקטע יחידות מידה, במסלולי רשת אפשר להשתמש במילות מפתח ספציפיות למידות. מילות המפתח האלה מוגדרות במפרט 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;
}

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

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

הפונקציה minmax()

תמיכה בדפדפן

  • 57
  • 16
  • 52
  • 10.1

מקור

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

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

סימון repeat()

תמיכה בדפדפן

  • 57
  • 16
  • 76
  • 10.1

מקור

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

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

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

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

.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, יוצרים רשת שנקראת Explicit Grid (רשת מפורשת). זו רשת שהגדרתם והקציתם לטראקים גודל.

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

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

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

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

סרגל צד עם 8 פריטי רשת אחים

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

התאמת גודל של מסלולים משתמעים

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

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

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

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

תמיכה בדפדפן

  • 57
  • 16
  • 52
  • 10.1

מקור

המאפיין 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)

תמיכה בדפדפן

  • 57
  • 16
  • 52
  • 10.1

מקור

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

בדיקת ההבנה

בחינת הידע שלכם בנושא משבצות

אילו מהאפשרויות הבאות הן מונחי רשת של CSS?

שורות
הרשת מחולקת בתווי ההפרדה האופקיים והאנכיים האלה.
מעגלים
מצטערים, אין מושגים של מעגלים ברשת CSS.
תאים
הצטלבות אחת של שורה ועמודה יוצרת תא רשת.
אזורים
כמה תאים יחד.
רכבות
מצטערים, אין מושג של רכבות ברשת CSS.
פערים
הרווח בין התאים.
מסלולים
שורה אחת או עמודה מסוימת היא מסלול ברשת.
 
main {
  display: grid;
}

מהו כיוון ברירת המחדל של פריסת הרשת?

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

מה ההבדל בין auto-fit לבין auto-fill?

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

מה זה min-content?

זהה ל-0%
0% הוא ערך יחסי של תיבת ההורה, ואילו min-content הוא ערך יחסי למילים ולתמונות שבתיבה.
האות הקטנה ביותר
אמנם האות קטנה ביותר, אבל האותיות הן לא השם שאליו מתייחס min-content.
המילה או התמונה הארוכות ביותר.
במשפט 'CSS is a Awesome', המילה 'מדהים' תהיה min-content.

מה זה max-content?

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

מה זה מיקום מודעה אוטומטי?

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

מקורות מידע

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