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

Patrick Brosset

Alison Maher

פורסם: 23 ביולי 2025

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

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

Test CSS Masonry in Chromium today

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

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

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

מה זה masonry?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

המצב של CSS masonry

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

שימוש ב-display: masonry

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

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

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

יצירת פריסת CSS מסוג Masonry

בואו ניצור פריסת CSS בסגנון בנייה מלבנים.

למרות שהתחביר של CSS Masonry עדיין בדיון, אפשר לבדוק את ההטמעה של התכונה ב-Chromium כבר היום. לשם כך צריך להפעיל את הדגל CSS Masonry Layout, כמו שמוסבר במאמר בדיקת 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, ערכי ברירת המחדל של grid-template-columns ו-grid-template-rows הם none. כפי שהוגדר כרגע, בדרך כלל מתקבלת עמודה או שורה אחת. בפריסה של masonry, ברירת המחדל הזו לרוב תוביל לפריסה לא רצויה.

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

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

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

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

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

כמו שצוין קודם, ההטמעה הנוכחית ב-Chromium מסתמכת על המאפיינים grid-template-* כדי להגדיר את נתיב ה-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 masonry, תגלו את האפשרויות החדשות שהוא מציע ותוציאו את המקסימום מהיצירתיות שלכם. דרך מצוינת להתחיל היא לבדוק את ההדגמות שלנו ואת קוד המקור שלהן, ולהתחיל ליצור דוגמאות משלכם ב-Chromium (חשוב להפעיל את הדגל קודם).

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

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

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

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