גם גריד הגיע למצב שהחלטתי ליצור בשבילו פוסט ייעודי שלם. רחלי עשתה כזה בתחילת דרכו של הגריד, ועכשיו תורי.
מדריכים שמתחילים מההתחלה
פוסט קצר שמסביר את הדברים הבסיסיים בגריד מי שלומד את זה בפעם הראשונה
פוסט מוצלח שעובר על המאפיינים של גריד ומסביר אותם בצורה מאוירת.
איך לדבג גריד ב-DevTools של פיירפוקס – מדריך לכאלה שהם ממש בתחילת דרכם. הוא מספק את קוד ה-HTML וה-CSS ומסביר איך להתקין dev tools בפיירפוקס. אחרי זה הוא מסביר מה זה implicit ו-explicit tracks, ומראה איך לעקוב אחרי שינויים.
למעשה צריך רק 4 מאפיינים של גריד בשביל רוב מה שאנחנו עושים – המחברת מראה איך בעזרת 4 מאפייני גריד (לא כולל המאפיין display:grid) אפשר ליצור פריסות שונות לחלוטין.
אנדי קלארק מסביר איך הוא מחליט על שמות לקומפוננטות הפריסה שלו
קודפן של כמה תבניות פריסה עם גריד
מדריך גריד יסודי ומעמיק שייחודו הוא בדוגמאות אינטראקטיביות
פלקס או גריד
גריד הוא לא תחליף לפלקסבוקס – פוסט קצר על מקרים שבהם פלקסבוקס עובד לא פחות טוב מגריד
איך ליצור כרטיס מדיה עם פלקס לעומת גריד. הכותרת של הפוסט היא “איך גריד משנה את האופן שבו בונים את התוכן” ובפוסט הזה יש עדיפות ברורה לגריד. המחבר מראה איך יצירת כרטיס מדיה (media card) עם גריד היא קלה ונוחה יותר מאשר עם פלקסבוקס. ועם זאת הוא מסיים בזה שגם לפלקס יש מקום.
גריד לפריסת אתר, פלקסבוקס לעימוד קומפוננטות – מדריך יסודי ומאויר שזו תשובתו לשאלה.
עיצובים מתקדמים עם גריד
האם להשתמש בגריד או בפלקס? – הפוסט עונה על השאלה ע”י חלוקה לתתי שאלות: כמה חישובים צריך לעשות, האם מדובר בשני ממדים או שלושה, מה צריכה להיות התנהגות האלמנטים, איך צריכה להיראות הפריסה (layout) בדפדפנים שלא תומכים בגריד.
סדרה של שני פוסטים על גריד – הראשון מתאר את גריד, לאילו מקרים הוא מתאים, החלקים השונים שלו ואיך לכתוב את ה-CSS המתאים לו. השני מקבל עיצוב ומראה איך מסתכלים עליו בצורה של גריד, ובונה את הקוד צעד אחרי צעד. הסברים בפוסטים האלה ברורים, יש תמונות גדולות שמלוות את ההסברים, וקוד קצר וברור.
איך ליצור אלבום הדבקות (scrapbook) עם גריד. באמת שזה נראה לי כמו קסם – ליצור באופן תכנותי בלגן של ריבועים. ואהבתי את שם הבלוג – CSS in Real Life. ומשהו שהוא לא גריד אבל מתקשר לסעיף הזה כי הוא גם כן ערבוב של תמונות בגדלים שונים שיושבים אחד על השני – אבל עם Flex.
פתרונות גריד לעיצובי מגזינים – דן דיוויס מראה תשעה עיצובי עיתונים/מגזינים שבמבט ראשון נראים בלתי אפשריים או לפחות מאתגרים מאוד לעיצוב ב-CSS, וליד כל אחד מהם יש קישור ליישום שלו בגריד. הוא מתחיל את המאמר בהסבר מה הייתה המוטיבציה שלו ליצור בכלל את העיצובים האלה, ומסיים בכמה מסקנות מהתהליך.
איך להעמיד תמונות אחת על השנייה ולא עם poistion:absolute. מדריך קצר ויפה על איך עושים את זה עם גריד, כולל איך לעשות זאת עם float עבור דפדפנים שלא תומכים בגריד.
יצירת עיצוב קצת מורכב עם גריד – פה יש הבדל בעיצוב בין רזולוציות מסך, וזה מוסיף לאתגר כמובן.
טבלאות רספונסיביות עם גריד – טבלאות גדולות שצריכות להיכנס למסך קטן הן אתגר רב שנים עם פתרונות שונים ומשונים. בפוסט הזה הפתרון הוא שימוש בגריד, עם הדגמות ב-codepen וצילומי מסך.
מדריך שמראה איך ליצור כוורת באמצעות גריד
אריק מאייר מסביר איך השתמש בגריד בעיצוב החדש של הבלוג שלו – מה היו השיקולים שלו, איך נראה מבנה האתר שלו בדפים שונים, ואיך הגריד היה הפתרון הנכון עבורו.
עיצובים מתקדמים עם גריד – עיצובים מחוץ לקופסה
לוח שנה בשלוש שורות של CSS – כוחו של מאפיין הגריד
יצרני גריד (Grid Generators)
יצרן גריד – בוחרים כמה טורים וכמה שורות רוצים ומה הרווח ביניהם, ומקבלים קוד. אפשר לבחור לתמוך בתקן הישן של גריד, להשתמש ב-prefix-ים, ועוד אפשרויות.
האתר הזה הוא cheat sheet אבל הוא גם יוצר גריד
יצרן גריד שאפשר גם ללמוד ממנו, מבית CSS Tricks.
Codepen-ים
תראו איזה מדף ספרים מיוחד בצורתו ומפעים ביישומו עשו עם גריד בקודפן הזה.