המסע שלי ליישם אה-סימטריה ב css

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

 

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

איך ניתן ליצור את המראה הזה? ובכן, האפשרות האמינה ביותר שאני יכולה להמליץ עליה היא שימוש ב js. אם אתם משתמשים בוורדפרס, אז כמובן שיש פלאגינים (כמו למשל זה), אבל הרבה יותר פשוט (ונכון מבחינת בניית האתר) להשתמש ב masonry שנמצא ב core של וורדפרס ע"י שימש ב:

wp_enqueue_script( 'masonry' );

פה יש מדריך צעד אחרי צעד למימוש masonry בוורדפרס.

 

אבל כתבת בכותרת יישום ב css…

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

אז איך זה עובד?

מצאתי את ה codepen המקסים של Dudley Storey שמדגים שימוש ב column-width ליציאת מראה פינטרסט:

See the Pen Pure CSS Pinterest Columnar Layout by Dudley Storey (@dudleystorey) on CodePen.

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

יש לנו div עוטף שמחזיק את כל הפוסטים. לאותו ה parent-div אנחנו נותנים את ההגדרות:

-webkit-column-width: 32rem;
-moz-column-width: 32rem;
column-width: 32rem
-webkit-column-gap: 1.5rem;
-moz-column-gap: 1.5rem;
column-gap: 1.5rem;

ההגדרה הראשונה של column-width מתייחסת לרוחב העמודות שנרצה, ו column-gap מתייחס לרווח בין העמודות. column דומה ל display: flex בצורת היישום שלו – הוא מוגדר על אלמנט אב ומשפיע ישירות על הילדים של האלמנט. מה שכן, אם האלמנטים-ילדים הם אלמנטי block יש להגדיר אותם display: inline-block, ואם הם אלמנטי flex יש להגדיר אותם display: inline-flex.

אז הכל היה אחלה ממש עד שהצצה בעיה ב QA. הבעיה הזאת הובילה אותי לקרוא קצת יותר על column. כן, אני יודעת, הייתי צריכה לעשות את זה קודם – אבל היי- זה עבד אז למה לחפור :).ניגשתי לאתר החביב עלי, css-tricks במדריך לשימוש בעמודות בעיצוב רספונסיבי. הפוסט הוביל אותי למסקנה חשובה – המאפיין column על כל הנגזרות שלו, מיועד לעבודה על עמודות בתוך טקסט. לטיפול בטיפוגרפיה ולא לעיצוב אלמנטים. אבל רגע, אם אני מיישרת אלמנטים עם text-align: center, למה בעצם לא לעמד עם column-width? אז אין לי תשובה חד משמעית, מעבר לעובדה שזה קצת "באגי".

אז מה הייתה הבעיה? הקטגוריה שאותה עיצבתי בעזרת column-width הייתה עם אפשרות סינון, כלומר אם סימנתי תגית ספציפית רשימת הפוסטים הצטמצמה לפוסטים בתגית הרצויה. הסינון הזה גרם לבאג מעצבן בכרום ובאקספלורר 10 ואדג' על win7 – כאשר הוצגו פחות מחמישה פוסטים, במקום להסתדר בשלוש עמודות הפוסטים חולקו רק לשתי עמודות ויצרו עמודה שמאלית ריקה.

חשבתי שאולי משהו אצלי לא היה בסדר – אז חזרתי ל codepen, עשיתי fork והורדתי את כמות האלמנטים-ילדים לארבעה. מה קרה? גם שם האלמנטים יצרו מבנה של שתי עמודות מלאות ואחת ריקה. אני לא מביאה פה אמבד של ה codpen כי באמבד יש ממילא רק שתי עמודות בשל הגבלת רוחב הפוסט. ניתן לראות את ה codepen עם ארבעה פוסטים פה. (כדי לראות את הבאג יש לפתוח את הלינק בכרום או אקפלורר).

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

מצאתי את הפוסט המצויין והמעמיק של Zoe Mickley (שאותה אני מעריצה מאז ששמעתי הרצאה שלה על flex – ראו פרוט פה), על בעיות בשימוש ב column-width.

המשכתי לחפש אולי עוד אנשים נתקלו בבעיה שלי, ואכן לא הייתי לבד. אבל לא ממש נמצא פתרון. אחת ההמלצות הייתה לתת גובה ל parent-div. היות ומספר הפוסטים שלי היה דינאמי לא יכלתי ליישם זאת. (במאמר מוסגר – אני כן יכולה לומר שזה עוזר לפעמים עם בעיות של עמודות שבורחות מתוך ה parent-div). ניסחתי גם אני (בעזרתה של לאה) שאלה ל stackoverflow אבל לא קיבלתי מענה 🙁

לבסוף זנחתי את השימוש ב column-width ויישמתי את העיצוב בעזרת js.

אני לא מְצֵרָה על העבודה שעשיתי, על החקירה ו"בזבוז" הזמן למציאת פתרון. זאת הדרך ללמוד ובזכות זה אני מכירה עוד מאפיין ב css. עכשיו רק נותר לי לחכות לעיצוב הבא שיכלול שימוש רספונסיבי בעמודות טקסט באתר ואוכל ליישם את column-width במטרה שלשמו הוא נועד 🙂

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

כמעט שנתיים אחרי – css-tricks מוציאים פוסט עם מגוון אפשרויות של CSS בשילוב עם JS ובלעדיו ליצירת מבנה של Masonry (נוסף ב- 15.01.2019)

גם smashing-magazine הוציאו פוסט על שימוש בעמודות – When And How To Use CSS Multi-Column Layout (נוסף ב-24.01.2019)