כבר כמה חודשים שאני אוספת לינקים ומידע על display:grid . כל פעם שנקרה בדרכי לינק מעניין, אני קוראת ושומרת לי בצד ללמידה מעמיקה שתוביל כמובן גם לפוסט מעניין.
אבל הימים עוברים ושום משהו גדול לא נכנס תחת ידי שאוכל ליישם עליו את המאפיין המעניין הזה כדי להתנסות בו. ירימו גבה חלקכם ויגידו – אז תתנסי ב codepen. נכון, אני לא שוללת, אבל מה שבא לי זה פרויקט אמיתי ולא משהו התנסותי. משהו שיאלץ אותי להתמודד עם האתגר עם עיצוב שמישהו מצפה לראות מיושם באופן מושלם. אז קצתי מלחכות והחלטתי לחלוק אתכם את הפוסטים שצברתי.
זה לא…
זה לא פוסט של הסברים בעברית על grid, בשביל זה יש את הפוסט של מתן יוסף, שהעביר הרצאה על grid באירוע Fed On Beer שהתקיים ב 22.05.17.
זה לא פוסט של התמודדות עם קשיים כי כאמור, לצערי לא היו לי עדיין קשיים (כמו שאומרים: מי שלא שוטף כלים לא שובר כלים. ומי שלא שוטף לא יכול להעיר איך הכי טוב להכניס למדיח ;).
מה כן?
זה פוסט מְתַאֲבֵן, לי ולכם עם כל החומרים שצברתי עד עכשיו על grid.
זה פוסט עם המון לינקים. לא את כולם אפשר לקרוא מהתחלה ועד הסוף ובטח שלא בפעם אחת, אבל נחמד שיש מקום אחד שמרכז את כולם. מבטיחה לערוך ולעדכן אם יהיו לי עוד לינקים נחמדים.
display:grid יהיה המאפיין היציב שכולנו מייחלים לו? via GIPHY.
אז – בתאבון!
מה זה grid ואיך משתמשים בו
- Getting to know CSS Grid Layout – פוסט ארוך ומעמיק עם הרבה הסברים ודוגמאות להבנה.
- עוד פוסט מעמיק, אבל עם דוגמאות פחות מאירות עיניים.
- מדריך מפורט מאוד (יש אפילו תוכן עניינים) עם דוגמא לכל הגדרה. נוח לריפרוף אם רוצים למצוא הגדרה ספציפית ומה היא עושה.
- כמובן שיש את ההסבר המעולה של css-tricks, ואת המדריך המלא שלו.
- ואיך בלי הרפרנס של codrops
- פוסט קצר שמסביר איך להשתמש עם grid. אין פירוט מעמיק אבל מה שנחמד בו זה שיש דוגמא של עיצוב שאותה הוא יישם בעזרתו.
- CSS Grid Features That Make My Heart Flutter – פוסט שמציג ומסביר 3 פיצ'רים מאוד מרגשים ומעשירים שיש בשימוש ב
display:grid. - פוסט עם דוגמה לשימוש פשוט בגריד לעימוד.
- דוגמה למקרה לשימוש ב (grid (case-study – תמיד מעניין ללמוד מנסיון ואתגרים של אחרים. הבלוג של האתר הזה מעניין מאוד ומציג דברים חדשניים.
- ולמי שמעדיף את שפת הקודש – פוסט הסבר על גריד בעברית של מתן יוסף.
תוספות של פוסטים מעניינים (20.06.2017):
- לכאורה, עוד פוסט הסבר על התנהגות grid אבל עדיין ראוי לציון בשל כמה דברים. אחד הכתיבה המאוד קולחת ונעימה. הסיבה השניה היא העבובדה שאין דוגמאות מקריות אלא בניה של layout של עמוד.
- מדריך לבניית טופס בשימוש עם grid
- הסבר מעמיק על יחידת המידה fr
- הסבר על הפונקציה ()minmax שבאה יחד עם
display:grid.תוספות #2 (25.03.2018):
- קורס חינמי מצויין של webos, לא קצר אבל מאוד מקיף כולל דוגמאות לשימוש יום יומי.
- הסבר על Explicit and Implicit Grids. (ממליצה בחום לקרוא אחרי הקורס 🙂 )
- פוסט על המשך פיתוח של גריד ושינויים במאפיינים תוך המנעות מפריפיקס. (נוסף ב 16.04.2018)
- הסבר על נתינת שמות לאזורים וגבולות בגריד. שימושי מאוד! (נוסף ב 25.04.2018)
- אתר המרכז הרבה מידע על גריד.(נוסף ב 02.05.2018)
- סיכום של אתגר של smashing-magazine לשימוש בגריד
תוספות #3 (18.10.2018)
כלים ומשחקים
- Grid Garden -משחק ללמידה של המאפיין. חביב למדי. אח של משחק דומה ללימוד
flex. - sandbox למשחק עם גריד.
- אוסף של דוגמאות לשימושים ב-
grid. קצת קשה להבין בהתחלה מה קורה שם – אבל שווה לדפדף בין האפשרויות. - ספרייה שלמה של דוגמאות לשימוש בגריד. כולם – למעט אלה שמצויין בהם אחרת – תומכות בדפדפנים השונים. בכל דוגמה יש codepen. פה יש דוגמאות לעימוד של מבנה לדף שלם. 2 הלינקים שייכים לעבודה של Rachel Andrew. מי שלא מכיר, Rachel Andrew אחת הראשונות ששמעתי ממנה על grid כשהוא עוד היה בגדר מאפיין בטא.
- עוד אוסף של דוגמאות לשימוש ואפשרויות למשחק עם מבנה בשימוש עם
grid, מבית היוצר של מוזילה, שיצרו דמו מתוך למידה וחקירת המאפיין. - CSS Grid Cheat Sheet – בדיוק מה שזה 🙂
תוספת (09.07.2017)
בדפדפן Firefox Nightly התווספה אפשרות layout שממוקדמת בחלון ה inspect על יד Rules, Computed וכוד שמאפשר צפייה בעמודות גריד על פני האתר ואפשרות שונות של מאפייני גריד כמו אפשרויות עריכה שונות. על כל התובפות אפשר לקרוא בפוסט של FireFox
תוספות (16.04.2018)
- לכאורה – לא מחדש יותר מדי, אבל המדריך הזה ליצירת cards נחמד מאוד ואני מניחה שיהיה שימושי.
- קורס ללימוד גריד. אחד מני רבים 🙂
grid בחיי היום יום
- אי אפשר בלי – can i use מי תומך ומי לא.
- פוסט של A list apart על הדרך לשלב את השימוש בגריד ב-style קיים. מעניין מאוד ושימושי מאוד כי לא תמיד יש לנו פרויקטים של "דף חדש".
- השוואה בין flex ו-grid. פוסט מתבקש מעמיק ומעניין.
- פוסט על fallback ודריסות של קוד קיים על ידי גריד לשמירה על תמיכה אחורה לדפדפנים ישנים.
תוספות (20.06.2017):
- פוסט שמדגים מתי להשתמש ב grid ומתי ב flex.
- פוסט של smashing magazine על הכנסת שימוש ב grid בפרודקשן
- פוסט על עבודה עם גריד ו-bootstrap, ולמה בחלק מהמקים לזנוח את bootstrap. (התווסף לפוסט ב 11.09.2017)
תוספות #2 (25.03.2018):
- פוסט על 2 דרכים לשבור את הגריד (לא בפן החיובי של המילה), ואיך לפתור את זה.
- למה grid טוב יותר מ-flex לעימוד
- איך להשתמש ב grid ולתת גם fallback לדפדפנים שלא נתמכים
- שימוש ב-grid לשמרניים שבינינו
- רייצ'ל אנדרו בסמשינג מגזין, על מכשולים ומהמורות בגריד.
- פוסט של אלעד שכטר – כל מה שצריך לדעת בשביל להיות גריד נינג'ה (נוסף ב 10.05.2018)
מקווה שהשארתי לכם חשק לצאת ולהתנסות 🙂
תודות ל:
לאה כהן שתמיד חושבת עלי ושולחת לי דברים מעניינם לקרוא ולהחכים.
לכל מי שהעלה ושיתף בקבוצה של CSS Masters Israel.