Dev-Time

להתחיל לעבוד עם CSS Grid

CSS GRID

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

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

לפני שנתחיל,  כיצד לאורך השנים היינו בונים לlayout? טבלאות למי שהיה כאן בתקופה הזו, floats ושיטות clearfix שונות בשביל לפתור את בעיית הניתוק מהflow, בעיית הwhite-space ש-inline-block יוצרת לנו, position: absolute שמנתק אותנו גם הוא מהflow ועלול לסבך מפתחים פחות מנוסים. כל אלו עד שבא הפתרון flexbox .flexbox הוא כלי מדהים אשר מאפשר לנו לעשות דברים בקלות כגון לבנות תפריט ניוט אך היעוד שלו הינו לחלקים/קומפונטטות קטנות ולא לבניית לlayout שלם. ובכתבה זו אנסה להציג את חלק מהיכולת של grid בשביל שתוכל להבין את כוחו ולמה הוא עדיף כשרוצים לבנות layout.
רצוי ואפילו מומלץ לעשות שימוש ב2 המאפיינים האלו, גריד ופלקסבוקס עובדות נפלא ביחד, גריד מהווה את השלד של העמוד תוך שפלקסבוקס מצליח לסדר לנו קומפונטטות פנימיות בתוך השלד.
אני ממליץ להיכנס לCan I Use ולבדוק התאמה לכל דפדפן שאותו נרצה להציג למשתמש.
כיוון ש-grid זה נושא מאוד גדול, והכתבה בסוף באה לחשוף בפנינו כמה שיותר בכמה שפחות זמן, אני אתן המון דוגמאות והסברים קצרים על כל אחת.

שנתחיל?
אתחיל בדומה פשוטה בשביל שנוכל להתחיל להיכנס לעניינים.

See the Pen grid-example-1 by Matan (@matanyo) on CodePen.

לצורך תחילת עבודה עם grid, אנחנו צריכים לתת לאלמנט העוטף display: grid כדי שיבצע את השינוי על האלמנטים תחתיו.
תוכלו לראות בדוגמה שאני משתמש בשלושה מאפיינים חדשים שהביא איתו grid:
1. grid-template-columns – האחראי על החלוקה של העמודות וגודלן, בדוגמה הספציפית הזאת כתבתי 3 ערכים של fr (ניתן לכתוב כל יחידת מידה אחרת) וכך הדפדפן באופן אוטומטית חילק לי את כל li ברשימה לשלשות.
2. יחידת מידה fr – הינה יחידת מידה יחסית אשר מאפשרת לנו לתת לדפדפן להחליט את גודל האלמנט, העיקר שהוא תמיד יהיה גדול, קטן או זהה ביחס לשאר האלמנטים (שומר על פרופרוציות).
ניתן לראות בדוגמה כיצד אלמנט ג’ גדול פי שלושה מאלמנט א’ ושאלמנט ב’ גדול פי שניים מאלמנט א’.
3. grid-gap   כשמו כן הוא, יוצר רווחים ולמעשה מרחיק בין האלמנטים, בדוגמה כתבתי grid-gap של 20px שדואג לתת לי הפרדה של 20px מכל אלמנט ואלמנט.
grid-gap הוא קיצור של 2 מאפיינים, האחד grid-column-gap והשני grid-row-gap כשהערך הראשון יהווה את הgap בין השורות והערך השני בין העמודות.
חשוב – grid-gap אינו עובד עם fr ומתנהג שונה עם יחידת מידה של אחוזים, כשהוא מפריד אך ורק בצורה אנכית. ממליץ לשחק עם הערכים ותראו כיצד gap מגיב.


grid-template-area

אציג כאן דוגמה מאוד בסיסית למאפיין grid-template-area שלדעתי הוא בין המעניינים שהביא איתו grid.
מהסתכלות זריזה ניתן לראות שזה שלא syntax רגיל בCSS אלא משהו באמת יחודי ומעניין.
בדוגמה כאן אני דבר ראשון נותן לכל האלמנטים שנמצאים תחת הbody שם יחודי על ידי קביעת grid-area.
האלמנט ההורה מקבל את grid-template-areas שבעזרתו אני קובע כיצד להעמיד כל אלמנט ולמעשה את כל הגריד (grid-area-name).
בנוסף אני עושה שימוש במאפיין grid-template-rows שמטרתו להגדיר את גודל השורות, הauto הוא הדיפולט שבעצם הcontent קבוע את גודל השורה, בשורה האמצעית אני קובע מידה של 1fr בשביל שיתפרס וינצל את המקום שהוא יכול.

See the Pen grid example- simple grid by Matan (@matanyo) on CodePen.


repeat

עם הזמן CSS נעשת מתוחכמת יותר ויותר, השפה מתפתחת ומועשרת ממרכיבים של preposessors.
שימו לב למאפיין repeat שיכול לקצר את העבודה ב grid.
למעשה זו פונקציה שמקבלת 2 פרמטרים, הראשון הוא כמות הפעמים שנרצה שהדבר יחזור והשני הוא איזו יחידות מידה נרצה.
בדוגמה הזאת אני לא עושה שימוש משמעותי בrepeat. אני רק מציג לכם את האפשרות במקום לכתוב כמה פעמים ערכים זהים אפשר לעשות שימוש בrepeat. בgrid-template-row אני משתמש בrepeat כדי ליצור 2 שורות של 50vh כל אחת ובgrid-template-column אני מייצר 2 עמודות עם 1fr
לא צריך להיות גאון כדי להבין כמה הדבר הולך להקל עלינו כשנגיע לגריד מורכב שחוזר על עצמו.

See the Pen grid-repeat-example by Matan (@matanyo) on CodePen.


minmax

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

See the Pen minmax-grid by Matan (@matanyo) on CodePen.


Grid by the child elements

גריד מאפשר לבנות layout גם בשימוש באלמנטים שנמצאים תחת הורה עם display: gird.
grid-column יקבע באיזו עמודה האלמנט שלנו יעמוד, grid-row יקבע באיזו שורה.
הדרך הפשוטה ביותר להסביר כיצד הדבר זה עובד על ידי תמונה אחת פשוטה שווה יותר מאלף מילים (תמונה שלקחתי מהמצגת שלי על גריד).

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

See the Pen grid-column/row by Matan (@matanyo) on CodePen.

אני עושה שימוש בסימן / שמאפשר לי לקבוע היכן האלמנט יתחיל והיכן הוא יסתיים בתוך הגריד.
שימו לב – עוד יכולת מדהימה של גריד, אלמנט 6 נמצא מעל אלמנט 2 ללא צורך בpositioning. במידה וארצה לשנות את המצב שאלמנט 2 יהיה מעל 6 פשוט אתן לו z-index גבוה יותר.


השלכות וסכנות של גריד.
בגלל יכולת השליטה על סידור האלמנטים אך ורק בעזרת CSS, הדבר עלול לעודד מפתחים פשוט להתעלם מהסדר של הmarkup ולסדר הכל בCSS..
נסו לדמיין לחיצה על כפתור TAB ושאינה מסודרת באופן הגיוני אלא כל לחיצה תוביל כל פעם למיקום אחר בגריד => פגיעה בנגישות.
חשש נוסף הוא רידוד היררכיה בHTML שהכרנו עד היום. ” flating the markup” זאת אומרת, תהיה היררכיה של בן ישר ואב בלבד. מפתחים ימנעו ליצור אלמנטים עם נכדים או נינים בHTML שלנו בגלל שגריד ופלקס עובדים בשיטה של אב ובנים ישירים.


לינקים שימושיים

http://gridbyexample.com/examples/
http://codepen.io/adrianroworth/full/OpeyZq/
https://alialaa.github.io/css-grid-cheat-sheet/
http://chris.house/blog/a-complete-guide-css-grid-layout/
http://cssgridgarden.com/
http://jonibologna.com/spring-into-css-grid/

מתן יוסף

תמיד מתעניין ורוצה לדעת עוד..
יש לכם משהו לשאול או להעיר?
קישור ללינקדאין שלי ↓

3 comments

Follow

Get every new post delivered to your Inbox

Join other followers