נדרש משוב: איך מגדירים בנייה של CSS?

Rachel Andrew

Ian Kilpatrick

Tab Atkins-Bittner

תאריך פרסום: 19 בספטמבר 2024

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

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

הפוסט הזה לא מכסה את כל התרחישים האפשריים לשימוש, אבל ברור שהפרדה בין פריסת 'לבנים' לבין פריסת רשת לא תגרום לכך שהתכונה תהיה חסרת פונקציונליות. למעשה, יכול להיות שההפך הוא הנכון. כפי שנסביר בהמשך, בגרסה display: masonry יש הזדמנויות חדשות וסינטקס פשוט יותר. בנוסף, מפתחים רבים הביעו חשש שסידור מחדש של פריטים בפורמט 'לבנים' עלול לגרום לבעיות נגישות. הבעיה הזו מטופלת גם בשתי הגרסאות של התחביר, באמצעות המאפיין reading-flow.

פריסה בסיסית של 'לבנים'

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

עם display: masonry

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

כדי להגדיר טראקים, משתמשים ב-masonry-template-tracks עם ערכי רשימת הטראקים כפי שהם משמשים בפריסה של רשת CSS.

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(3, 1fr);
  gap: 10px;
}

עם display: grid

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

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

.masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: masonry;
  gap: 10px;
}

נקודות שכדאי לשקול לגבי שתי האפשרויות

הבדל משמעותי בין השיטות האלה הוא שבגרסה display: masonry מופיעה פריסה של 'לבנים' גם אם לא מציינים טראקים באמצעות masonry-template-tracks. לכן, יכול להיות ש-display: masonry הוא כל מה שנחוץ לכם. הסיבה לכך היא שהערך הראשוני של masonry-template-tracks הוא repeat(auto-areas, auto). הפריסה יוצרת כמה טראקים בגודל אוטומטי שאפשר לכלול בקונטיינר.

זרימת נתונים הפוכה עם אבן

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

עם display: masonry

יוצרים פריסת שורות עם display: masonry, ואז משתמשים ב-masonry-direction עם הערך column-reverse.

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(3, 1fr);
  masonry-direction: column-reverse;
}

עם display: grid

יוצרים פריסה של אריחים עם display: grid ועם grid-template-rows: masonry. לאחר מכן משתמשים במאפיין grid-auto-flow עם ערך חדש של row-reverse כדי לגרום לפריטים להתפרס מצד הבלוק של מאגר התצוגה.

.masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: masonry;
  grid-auto-flow: row-reverse;
}

נקודות שכדאי לשקול לגבי שתי האפשרויות

הגרסה display: masonry דומה מאוד לאופן שבו flexbox פועל. כדי לשנות את כיוון הזרימה של העמודות, משתמשים במאפיין masonry-direction עם הערך column-reverse.

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

סידור בשורות

אפשר גם לשנות את הכיוון כדי להגדיר שורות.

עם display: masonry

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

.masonry {
  display: masonry;
  masonry-direction: row;
}

עם display: grid

.masonry {
  display: grid;
  grid-template-columns: masonry;
  grid-template-rows: repeat(3, 1fr);
}

נקודות שכדאי לשקול לגבי שתי האפשרויות

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

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

• row
• column
• row-reverse
• column-reverse

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

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

מיקום פריטים

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

עם display: masonry

הקוד הבא ב-CSS מגדיר פריסה של 'לבנים' עם ארבע עמודות. לכן, ציר הרשת הוא עמודות. הפריט עם הסיווג a ממוקם מהשורה הראשונה בעמודה ועד לשורה השלישית בעמודה, וחוצה שני טראקים עם המאפיינים החדשים masonry-track-*. אפשר גם להגדיר את זה כקיצור של masonry-track: 1 / 3;.

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(4, 1fr);
}

.a {
  masonry-track-start: 1;
  masonry-track-end: 3;
}

עם display: grid

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

אם ציר התצוגה הוא עמודות, המערכת תתעלם מהמאפיינים grid-row-*. אם ציר התצוגה הוא שורות, המערכת תתעלם מהמאפיינים grid-columns-*.

.masonry {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: masonry;
}

.a {
  grid-column-start: 1;
  grid-column-end: 3;
}

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

עם display: masonry

השורות בעלות השם מוגדרות בערך של רשימת הטראקים של masonry-template-tracks. אפשר למקם את הפריט אחרי כל שורה בשם a.

.masonry {
  display: masonry;
  masonry-template-tracks: 100px [a] auto [a] auto 100px;
}

.item {
  masonry-track: a;
}

עם display: grid

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

.masonry {
  display: grid;
  grid-template-columns: 100px [a] auto [a] auto 100px;
  grid-template-rows: masonry;
}

.item {
  grid-column: a;
  grid-row: a; /* ignored */
}

אפשר גם להשתמש באזורים עם שם בשני התחבירים. בדוגמאות הבאות מוצגת רשת עם שלושה טראקים בשמות 'a', 'b' ו-'c'.

עם display: masonry

השמות של הטראקים הם הערך של masonry-template-areas. מכיוון שלא מוגדרים גדלים של טראקים, כל שלושת הערכים מוגדרים כברירת מחדל לגודל auto. הפריט ממוקם בטראק 'a'.

.masonry {
  display: masonry;
  masonry-template-areas: "a b c";
}

.item {
  masonry-track: a;
}

האופן שבו זה פועל זהה בין אם מגדירים שורות ובין אם מגדירים עמודות. ההבדל היחיד הוא במאפיין masonry-direction.

עם display: grid

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

.masonry {
  display: grid;
  grid-template-areas: "a b c";
  grid-template-rows: masonry;
}

.item {
  grid-column: a;
}

עם זאת, עבור rows צריך לכתוב את הערך בצורה שונה, כי grid-template-areas מגדיר למעשה אזור דו-מימדי, וכל שורה נכתבת כמחרוזת נפרדת:

.masonry {
  display: grid;
  grid-template-areas: "a" "b" "c"; /* Note the difference, each row is quoted. */
  grid-template-columns: masonry;
}

.item {
  grid-row: a;
}

נקודות שכדאי לשקול לגבי שתי האפשרויות

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

קיצורי דרך

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

עם display: masonry

בקיצור display: masonry נעשה שימוש במילת המפתח masonry. כדי ליצור את הפריסה הבסיסית של 'לבנים', משתמשים בקוד ה-CSS הבא:

.masonry {
  display: masonry;
  masonry: repeat(3, 1fr);
}

כדי ליצור פריסה פשוטה של פריטים בטור:

.masonry {
  display: masonry;
  masonry: row;
}

כדי להגדיר טראקים ופריסה מבוססת-שורות באמצעות קיצור הדרך:

.masonry {
  display: masonry;
  masonry: repeat(3, 1fr) row;
}

עם display: grid

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

.masonry {
  display: grid;
  grid: masonry / repeat(3, 1fr);
}

כדי ליצור פריסה פשוטה של פריטים בטור:

.masonry {
  display: grid;
  grid: repeat(3, auto) / masonry;
}

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

לדוגמה, נניח שיצרתם שלוש עמודות בשמות 'a', 'b' ו-'c', ומילאתם אותן מלמטה למעלה.

עם display:masonry

ב-display: masonry, אפשר להגדיר את כל שלושת האפשרויות האלה יחד בקיצור הדרך:

.masonry {
  display: masonry;
  masonry: column-reverse "a b c";
}

מכיוון שהן מוגדרות בגודל אוטומטי, אין צורך לציין את הגדלים, אבל אם רוצים להגדיר גודל ספציפי, אפשר להוסיף אותו. לדוגמה: masonry: column-reverse 50px 100px 200px "a b c";.

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

עם display: grid

ב-display: grid, צריך להגדיר בנפרד את שלושת ההיבטים הבאים:

.masonry {
  display: grid;
  grid-template-rows: masonry;
  grid-template-areas: "a b c";
  grid-auto-flow: wrap-reverse;
}

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

.masonry {
  display: grid;
  grid: masonry / 50px 100px 200px;
  grid-template-areas: "a b c";
  grid-auto-flow: wrap-reverse;
}

לחלופין, אם רוצים להשתמש ב-'grid' כדי להגדיר גדלים ושמות של אזורים יחד:

.masonry {
  display: grid;
  grid: "a b c" masonry / 50px 100px 200px;
  grid-auto-flow: wrap-reverse;
}

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

.masonry {
  display: grid;
  grid: 50px 100px 200px / masonry;
  grid-template-areas: "a" "b" "c";
}

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

.masonry {
  display: grid;
  grid: "a" 50px "b" 100px "c"  200px / masonry;
}

נקודות שכדאי לשקול לגבי שתי האפשרויות

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

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

שיקולים נוספים

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

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

שליחת משוב

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