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

Rachel Andrew
Ian Kilpatrick
Ian Kilpatrick
GitHub
Tab Atkins-Bittner
Tab Atkins-Bittner

פורסם: 19 בספטמבר 2024, עדכון אחרון: 13 בפברואר 2026

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

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

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

פריסת מבני אבן בסיסית

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

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

עם display: masonry

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

כדי להגדיר רצועות, משתמשים ב-masonry-template-tracks עם ערכי רשימת הרצועות כפי שמשתמשים בהם בפריסת CSS grid.

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

עם display: grid

כדי ליצור פריסת masonry, קודם יוצרים פריסת רשת באמצעות הערך 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 version, מקבלים פריסה של בלוקים גם אם לא מציינים רצועות עם masonry-template-tracks. לכן, יכול להיות שכל מה שצריך הוא display: masonry. הסיבה לכך היא שהערך הראשוני של masonry-template-tracks הוא repeat(auto-areas, auto). הפריסה יוצרת כמה שיותר טראקים בגודל אוטומטי שמתאימים למאגר.

זרימה הפוכה עם פריסת Masonry

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

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

עם 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 נעשה שימוש ב-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:

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

.item {
  grid-column: a;
}

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

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

כדי ליצור פריסת מייסונרי פשוטה שמבוססת על שורות:

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

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

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

עם display: grid

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

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

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

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

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

שליחת משוב

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