בחינת הרשת המרומזת וכוחות המיקום האוטומטי של CSS Grid

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

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

"מפורש, מרומז? מה לעזאזל קורה כאן?"

מונחים מוזרים, נכון? מנואל מאטוזוביץ' כבר יש ל הסבר טוב של מה שאנחנו יכולים במילה "מרומז" ו"מפורש" ב-CSS Grid, אבל בואו נחפור ישר במה מה היא specification אומר:

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

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

מה לגבי מיקום אוטומטי?

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

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

סרגל צד דינמי

כאן, יש לנו שלוש פריסות שונות אבל יש לנו רק תצורת רשת אחת שעובדת עבור כולן.

main {
  display: grid;
  grid-template-columns: 1fr;
}

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

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

אנחנו יכולים להזיז את <aside> לעמוד ליד <section>:

aside {
  grid-column-start: 2;
}

והנה מה שה-DevTools אומר לנו עכשיו:

אנו מניחים את האלמנט שלנו בעמודה השנייה אבל... אין לנו עמודה שנייה. מוזר, נכון? מעולם לא הכרזנו על טור שני על <main> מיכל רשת, אבל הדפדפן יצר עבורנו אחד! זה החלק המרכזי מהמפרט שבדקנו:

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

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

נוכל למקם את <aside> לפני <section> במקום כך:

aside {
  grid-column-end: -2;
} 

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

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

עכשיו אין צורך לפרט grid-column-start למקם את <aside> אלמנט מימין ל- <section>! למעשה, כל פריט רשת אחר שנחליט לזרוק לשם בכל עת יזרום כעת בכיוון עמודה, כל אחד מהם ממוקם במסלולי רשת מרומזים משלו. מושלם למצבים בהם מספר הפריטים ברשת אינו ידוע מראש!

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

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

בדוגמה הראשונה, לא ציינו שום מיקום. במקרה זה, הדפדפן יציב את ה- <aside> אלמנט בעמודה המפורשת מכיוון שהוא מגיע ראשון ב-DOM. ה <section>, בינתיים, ממוקם אוטומטית בעמודת הרשת שהדפדפן יוצר עבורנו באופן אוטומטי (או במרומז).

בדוגמה השנייה, הגדרנו את <aside> אלמנט מחוץ לרשת המפורשת:

aside {
  grid-column-end: -2;
}

עכשיו זה לא משנה <aside> מגיע ראשון ב-HTML. על ידי הקצאה מחדש <aside> במקום אחר, הכנו את <section> רכיב זמין כדי לקחת את העמודה המפורשת.

רשת תמונה

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

יש לנו שתי תצורות רשת. אבל נחשו מה? אני לא מגדיר שום רשת בכלל! כל מה שאני עושה זה:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

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

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

לַחֲכוֹת! לא grid-area המאפיין בו אנו משתמשים כדי להגדיר אזורים בעלי שם במקום היכן אלמנטים מתחילים ומסתיימים ברשת?

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

.grid img:first-child {
  grid-area: span 3 / span 3;
}

/* ...is equivalent to: */
.grid img:first-child {
  grid-row-start: span 3;
  grid-column-start: span 3;
  grid-row-end: auto;
  grid-column-end: auto;
}

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

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

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

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

כל זה משורה אחת של CSS! זה הכוח של רשת "מרומזת" ומיקום אוטומטי.

עבור תצורת הרשת השנייה בהדגמה הזו, כל מה שעשיתי הוא לשנות את כיוון הזרימה האוטומטית באמצעות grid-auto-flow: column באותו אופן שעשינו קודם כשהצבנו an <aside> אלמנט ליד א <section>. זה מאלץ את הדפדפן ליצור א רביעי עמודה שבה היא יכולה להשתמש כדי למקם את שאר התמונות. ומכיוון שיש לנו שלוש שורות, התמונות הנותרות ממוקמות בתוך אותה עמודה אנכית.

אנחנו צריכים להוסיף כמה מאפיינים לתמונות כדי לוודא שהן משתלבות יפה בתוך הרשת ללא כל הצפה:

.grid {
  display: grid;
  grid-gap: 10px;
}

/* for the second grid configuration */
.horizontal {
  grid-auto-flow: column;
}

/* The large 3⨉3 image */
.grid img:first-child {
  grid-area: span 3 / span 3;
}

/* Help prevent stretched or distorted images */
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.grid img:first-child {
  grid-area: span 3 / span 3;
}

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

.grid img:first-child {
  grid-area: span 4 / span 4;
}

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

פריסות דינמיות

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

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

כשיש לנו אלמנט אחד, אנחנו לא עושים כלום. האלמנט יימתח כדי למלא את השורה והעמודה היחידים שנוצרו אוטומטית על ידי הרשת.

ביט כאשר אנו מוסיפים את האלמנט השני, אנו יוצרים עמודה נוספת (מרומזת) באמצעות grid-column-start: 2.

כאשר אנו מוסיפים אלמנט שלישי, הוא אמור לתפוס את הרוחב של שתי עמודות - זו הסיבה שהשתמשנו grid-column-start: span 2, אבל רק אם זה ה :last-child כי אם (ומתי) נוסיף אלמנט רביעי, זה צריך לתפוס רק עמודה בודדת.

אם נוסיף את זה, יש לנו ארבע תצורות רשת עם רק שתי הצהרות והקסם של רשת מרומזת:

.grid {
  display: grid;
}
.grid :nth-child(2) {
  grid-column-start: 2;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}

בוא ננסה עוד אחד:

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

.grid {
  display: grid;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}
.grid :nth-child(4) {
  grid-column-start: 2;
}

אתה מתחיל להבין את הטריק? אנו נותנים לדפדפן הוראות ספציפיות על סמך מספר האלמנטים (באמצעות :nth-child) ולפעמים, הוראה אחת יכולה לשנות את הפריסה לחלוטין.

יש לציין כי הגודל לא יהיה זהה כאשר אנו עובדים עם תוכן שונה:

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

grid-auto-rows: 1fr;
grid-auto-columns: 1fr;

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

אל האני grid-auto-columns ו grid-auto-rows מאפיינים מציינים את גודל הרצועות שלא הוקצה להם גודל לפי grid-template-rows or grid-template-columns.

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

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

מה קורה עם זה grid-auto-rows ולמה צריך שלושה ערכים? האם אנו מגדירים שלוש שורות?

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

• אם יש לנו שורה אחת, גודלה יקבל את הערך הראשון.
• אם יש לנו שתי שורות, הראשונה מקבלת את הערך הראשון והשנייה את הערך השני.
• אם יש לנו שלוש שורות, שלושת הערכים יתרגלו.
• אם יש לנו ארבע שורות (וכאן מגיע החלק המעניין), אנו משתמשים בשלושת הערכים עבור שלוש השורות הראשונות ומשתמשים שוב בערך הראשון עבור השורה הרביעית. לכן זה סוג של דפוס שאנחנו חוזרים עליו כדי להתאים את כל השורות המרומזות.
• אם יש לנו 100 שורות, הן יהיו בגודל של שלוש על שלוש 2fr 2fr 1fr 2fr 2fr 1fr 2fr 2fr 1fr, וכו '

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

אם נחזור לדוגמה שלנו, ההיגיון הוא שיהיה גודל שווה כאשר נוצרות שתי שורות (נשתמש ב- 2fr 2fr), אבל אם נוצרת שורה שלישית, אנחנו מקטינים אותה קצת.

דפוסי רשת

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

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

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

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

כעת, בואו נגדיר את הרשת ונגדיר את התבנית הכללית באמצעות ה- :nth-child בורר לחילופין בין אלמנטים:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows equal to 100px */
}
.grid :nth-child(4n + 1) { /* ?? */ }
.grid :nth-child(4n + 2) { /* ?? */ }
.grid :nth-child(4n + 3) { /* ?? */ }
.grid :nth-child(4n + 4) { /* ?? */ }

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

4(0) + 1 = 1 = 1st element /* we start with n = 0 */
4(0) + 2 = 2 = 2nd element
4(0) + 3 = 3 = 3rd element
4(0) + 4 = 4 = 4th element
4(1) + 1 = 5 = 5th element /* our pattern repeat here at n = 1 */
4(1) + 2 = 6 = 6th element
4(1) + 3 = 7 = 7th element
4(1) + 4 = 8 = 8th element
4(2) + 1 = 9 = 9th element /* our pattern repeat again here at n = 2 */
etc.

מושלם, נכון? יש לנו ארבעה אלמנטים, וחוזרים על התבנית על האלמנט החמישי, האלמנט התשיעי וכן הלאה.

הָהֵן :nth-child בוררים יכולים להיות מסובכים! לכריס יש סופר מועיל הסבר איך הכל עובד, לרבות מתכונים ליצירת דפוסים שונים.

כעת אנו מגדירים כל רכיב כך:

1. האלמנט הראשון צריך לקחת שתי עמודות ולהתחיל בעמודה אחת (grid-column: 1/span 2).
2. האלמנט השני ממוקם בעמודה השלישית (grid-column-start: 3).
3. האלמנט השלישי ממוקם בעמודה הראשונה: (grid-column-start: 1).
4. האלמנט הרביעי לוקח שתי עמודות ומתחיל בעמודה השנייה: (grid-column: 2/span 2).

הנה זה ב-CSS:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: 1/span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 3; }
.grid :nth-child(4n + 3) { grid-column-start: 1; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

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

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

.grid :nth-child(4n + 3) { grid-column-start: 1; }

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

.grid {
  display: grid;
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
  grid-auto-columns: 1fr; /* all the columns are equal */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

אבל קדימה, אנחנו יכולים לטייל לעשות יותר טוב! אנחנו יכולים גם להסיר את זה:

.grid :nth-child(4n + 2) { grid-column-start: 2; }

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

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

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

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

למה לא להשתמש grid-template-columns להגדיר עמודות מפורשות מכיוון שאנו יודעים את מספר העמודות?

אנחנו יכולים לעשות זאת! הנה הקוד עבורו:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1),
.grid :nth-child(4n + 4) {
  grid-column: span 2;
}

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

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

בואו ננסה דפוס אחר, קצת יותר מהיר הפעם:

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

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-rows: 100px;
}
.grid :nth-child(6n + 3) {
  grid-area: span 2/2; /* grid-row-start: span 2 && grid-column-start: 2 */
}
.grid :nth-child(6n + 4) {
  grid-area: span 2/1; /* grid-row-start: span 2 && grid-column-start: 1 */
}

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

.grid :nth-child(6n + 2) {
  grid-column: 1; /* grid-column-start: 1 */
}

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

.grid :nth-child(6n + 3) {
  grid-area: 1/2/span 2; 
    /* Equivalent to:
       grid-row-start: 1;
       grid-row-end: span 2;
       grid-column-start: 2 
     */
}

אבל זה לא עובד כי זה מכריח את כולם 6n + 3 אלמנטים למקם באותו אזור מה שיוצר פריסה מבולבלת. הפתרון האמיתי הוא לשמור על ההגדרה הראשונית של האלמנט השלישי ולהוסיף grid-auto-flow: dense כדי למלא את החסר. מ- MDN:

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

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

למה לא תמיד להוסיף את הנכס הזה כברירת מחדל?

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

הקוד הסופי שלנו הוא אז:

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: dense;
  grid-auto-rows: 100px;
}
.grid :nth-child(6n + 2) { grid-column: 1; }
.grid :nth-child(6n + 3) { grid-area: span 2/2; }
.grid :nth-child(6n + 4) { grid-row: span 2; }

עוד אחד? בוא נלך!

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

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

אני אשאיר אותך עם דפוס אחרון:

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

רוצה יותר?

לפני שנסיים אני רוצה לשתף בכמה שאלות Stack Overflow הקשורות ל-CSS Grid שבהן קפצתי עם תשובות המשתמשות ברבות מהטכניקות שכיסינו כאן יחד. זו רשימה טובה שמראה כמה מקרי שימוש אמיתיים ומצבים בעולם האמיתי מופיעים בהם הדברים האלה שימושיים:

גלישה את

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

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

באופן דומה, אולי תרצה לקרוא על grid-auto-columns ב-CSS-Tricks Almanac מכיוון ש-Mojtaba Seyedi נכנס לפרטי פרטים וכוללים ויזואליות מועילות להפליא כדי לעזור להסביר את ההתנהגות.

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