לבנה אחר לבנה: עזרה בבניית CSS Masonry

Patrick Brosset

Alison Maher

תאריך פרסום: 23 ביולי 2025, תאריך העדכון האחרון: 13 בפברואר 2026

צוותי Microsoft Edge ו-Google Chrome שמחים להודיע ש-CSS masonry מוכן לבדיקות מוקדמות של מפתחים ב-Chrome וב-Edge 140.

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

כדאי לבדוק את CSS Masonry ב-Chromium כבר היום

כדי לבדוק את CSS Masonry היום:

1. משתמשים ב-Chrome או ב-Edge 140 ואילך (או בדפדפן אחר שמבוסס על Chromium עם גרסה תואמת).
2. עוברים אל about:flags בכרטיסייה חדשה.
3. מחפשים את האפשרות CSS Masonry Layout (פריסת CSS בסגנון בנייה).
4. מפעילים את הדגל.
5. מפעילים מחדש את הדפדפן.

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

מה זה masonry?

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

אפשר להשתמש ב-CSS masonry כדי לסדר פריטים בפורמט של עמודה או שורה, כשהפריטים מוצבים בתוך העמודות או השורות האלה בצורה מכווצת.

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

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

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

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

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

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

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

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

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

פתרונות עקיפים והמגבלות שלהם

כדי להטמיע את תבנית העיצוב הזו באינטרנט היום, צריך להשתמש בספריות JavaScript או בפתרונות עקיפים שמבוססים על CSS grid, ‏ flexbox או multi-column. עם זאת, יש חסרונות לשיטה הזו, כולל:

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

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

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

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

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

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

המצב של CSS masonry

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

שימוש ב-display: masonry

התחביר הזה מציג את פריסת ה-CSS כסוג display משלו. מידע נוסף על הגישה ועל הסיבות להחלתה זמין בפוסט בבלוג Feedback needed: How should we define CSS masonry?‎ של צוות Google Chrome, וגם בקטע הבא של הפוסט הזה. אב הטיפוס הנוכחי ב-Chromium מבוסס על ההצעה הזו.

display: grid; grid-template-*: masonry;

בתחביר הזה, פריסת ה-CSS משולבת ישירות בפריסת ה-CSS. הפעלת מצב masonry מתבצעת על ידי הוספת מילת המפתח masonry להגדרה grid-template-columns במקרה של פריסת masonry מבוססת-שורות, או להגדרה grid-template-rows במקרה של פריסת masonry מבוססת-עמודות.

פרטים נוספים על ההצעה הזו והסיבות לה מופיעים בפוסט ב-WebKit‏ Help us choose the final syntax for Masonry in CSS (עזרו לנו לבחור את התחביר הסופי של Masonry ב-CSS).

שימו לב: חלופה להצעה הזו היא item-packהמאפיין ומילת המפתח collapse, שיפעילו פריסה של CSS במבנה של בנייה באבן במקום להשתמש באחד משני מאפייני תבנית הרשת.

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

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

יצירת פריסת masonry משלכם ב-CSS

בואו נהנה וניצור פריסת CSS של קיר לבנים.

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

יצירת קונטיינר של פריסה חופשית

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

.masonry {
  display: masonry;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

אם רוצים להשתמש במקום זאת בקונטיינר של masonry שמבוסס על שורות, משתמשים ב-display:masonry, מגדירים את גודלי השורות באמצעות grid-template-rows ואז מגדירים את masonry-direction:row.

.masonry {
 display: masonry;
 masonry-direction: row;
 grid-template-rows: repeat(auto-fit, minmax(160px, 1fr));
 gap: 10px;
}

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

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

שימוש בגודל ברירת המחדל של הרצועה

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

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

ההטמעה ב-Chromium מוסיפה את ההגדרה המוצעת החדשה של none, שתחליף את גודל הרצועה שמוגדר כברירת מחדל ב-CSS masonry. גודל ברירת המחדל החדש של רצועת האודיו הוא הערך repeat(auto-fill, auto). הערך הזה יוצר פריסת קיר יפה בלי להגדיר גדלים של רצועות בכלל:

.masonry {
  display: masonry;
  gap: 10px;
}

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

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

כדאי לנסות את מאפיין הקיצור masonry

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

לדוגמה, שני קטעי הקוד הבאים ייצרו מאגרי CSS masonry שווי ערך.

.masonry {
 display: masonry;
 masonry: "a a b" 50px 100px 200px row;
}

.masonry {
  display: masonry;
  masonry-direction: row;
  grid-template-rows: 50px 100px 200px;
  grid-template-areas: "a" "a" "b"
}

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

שימוש בגדלים מותאמים אישית של רצועות

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

.masonry {
 display: masonry;
 masonry: repeat(2, 3rem) repeat(auto-fit, 5rem) 12rem;
}

בדוגמה הזו, אנחנו מגדירים שני טראקים ראשונים של 3rem, ואחריהם מספר משתנה של טראקים של 5rem, ואז טראק יחיד של 12rem.

הוספה למספר טראקים

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

לדוגמה:

.masonry {
  display: masonry;
  masonry: repeat(auto-fill, minmax(12rem, 1fr));
}

.important-item {
  grid-column: span 2;
}

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

.masonry {
 display: masonry;
 masonry: repeat(auto-fill, minmax(12rem, 1fr));
}

.full-bleed {
 grid-column: 1 / -1;
}

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

כוונון עדין של מיקום פריטים בפריסת Masonry

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

דמיינו מאגר של פריסת Masonry עם שתי עמודות. אם יש פריט בגובה 110px בעמודה הראשונה ופריט בגובה 100px בעמודה השנייה, פריט שלישי ימוקם בעמודה השנייה, במרחק של 10px מתחילת הכיוון של פריסת ה-Masonry.

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

המאפיין החדש item-tolerance קובע את הרגישות במיקום הפריטים.

בדוגמה שלמעלה, אפשר להחיל את item-tolerance: 10px; על מאגר התגים כדי להתאים אישית את השונות במיקום הפריט:

.masonry {
  display: masonry;
  masonry: 200px 200px;
  gap: 10px;
  item-tolerance: 10px;
}

שימו לב שבמפרט הטיוטה, המאפיין הזה נקרא item-slack. קבוצת העבודה בנושא CSS החליטה לאחרונה להשתמש בשם item-tolerance במקום זאת, והמפרט יעודכן בקרוב.

מאפיינים זמינים אחרים

אפשר להשתמש באותם מאפייני גודל ומיקום של תבנית כדי לשנות את הגודל של הפריטים ולמקם אותם בציר הרשת של קונטיינר masonry, כמו ב-CSS Grid, למשל grid-row, ‏ grid-column, ‏ grid-area, ‏ grid-template-areas או order. כדי ליהנות מהיכולות המלאות של CSS Grid כשיוצרים פריסת Masonry.

בקשה למשוב

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

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

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

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

אם נתקלתם בבאג במהלך הבדיקה של התכונה, אתם יכולים לשתף את המשוב שלכם על ידי פתיחת באג חדש ב-Chromium.