1.6 גריד תרגול

תרגול גריד - CSS Grid¶

לפני שמתחילים, מאוד מומלץ לשחק ב-CSS Grid Garden - משחק אינטראקטיבי שמלמד את כל מאפייני הגריד בצורה כיפית:
https://cssgridgarden.com/

תרגיל 1 - layout של עיתון¶

בנו עמוד בסגנון עיתון עם ה-layout הבא:
- header - משתרע על כל רוחב העמוד
- sidebar - בצד שמאל (רוחב קבוע של 250px)
- main content - אזור התוכן המרכזי (תופס את שאר המרחב)
- footer - משתרע על כל רוחב העמוד

דרישות:
- השתמשו ב-grid-template-areas להגדרת ה-layout
- הוסיפו gap בין האזורים
- ה-header צריך להכיל כותרת של עיתון (שם + תאריך)
- ה-sidebar צריך להכיל רשימת קטגוריות (חדשות, ספורט, תרבות, טכנולוגיה)
- ה-main צריך להכיל לפחות 3 "כתבות" (כרטיסים עם כותרת ופסקה)
- ה-footer צריך להכיל טקסט זכויות יוצרים
- תנו רקע שונה לכל אזור כדי שיהיה ברור

תרגיל 2 - גלריית תמונות רספונסיבית¶

בנו גלריית תמונות שמתאימה את עצמה למסך:

דרישות:
- השתמשו ב-repeat(auto-fit, minmax(250px, 1fr)) ליצירת גריד רספונסיבי
- הגלריה צריכה להכיל לפחות 8 תמונות (אפשר להשתמש בתמונות מ-https://picsum.photos)
- כל תמונה צריכה להיות בגובה קבוע עם object-fit: cover
- הוסיפו border-radius ו-gap בין התמונות
- שנו את גודל חלון הדפדפן וודאו שמספר העמודות משתנה אוטומטית
- בונוס: הוסיפו כותרת מתחת לכל תמונה

תרגיל 3 - dashboard עם grid-template-areas¶

בנו עמוד dashboard עם האזורים הבאים:

header   header   header   header
sidebar  stats    stats    stats
sidebar  chart    chart    table
sidebar  chart    chart    table

דרישות:
- השתמשו ב-grid-template-areas ליצירת ה-layout
- ה-header - פס עליון עם שם המערכת
- ה-sidebar - תפריט ניווט אנכי
- ה-stats - 3 כרטיסי סטטיסטיקה בשורה (השתמשו בפלקסבוקס בתוך האזור הזה)
- ה-chart - אזור גדול לגרף (מספיק לשים placeholder)
- ה-table - טבלה קטנה עם נתונים
- הוסיפו צבעים, padding ו-border-radius לכל אזור
- גובה מינימלי 100vh

תרגיל 4 - גריד רספונסיבי עם media queries¶

בנו רשת של 6 כרטיסי מוצר שמשנה מבנה לפי גודל מסך:

דרישות:
- מובייל (עד 600px) - עמודה אחת (כל כרטיס בשורה נפרדת)
- טאבלט (600px-1024px) - 2 עמודות
- דסקטופ (מעל 1024px) - 3 עמודות
- השתמשו ב-grid-template-columns ו-media queries
- כל כרטיס צריך להכיל: תמונה, שם מוצר, תיאור קצר, מחיר וכפתור "הוסף לסל"
- הוסיפו gap בין הכרטיסים
- סדרו את התוכן בתוך כל כרטיס עם פלקסבוקס (כיוון אנכי)

תרגיל 5 - פריטים שמשתרעים על כמה תאים¶

בנו גריד של 4 עמודות עם 8 פריטים שבו:
- הפריט הראשון משתרע על 2 עמודות
- הפריט הרביעי משתרע על 2 שורות
- הפריט השישי משתרע על 2 עמודות ו-2 שורות
- שאר הפריטים בגודל רגיל (תא אחד)

דרישות:
- השתמשו ב-grid-column: span ו-grid-row: span
- תנו צבע רקע שונה לכל פריט
- הוסיפו מספרים בתוך כל פריט כדי לעקוב אחרי הסדר
- השתמשו ב-grid-auto-rows: minmax(150px, auto) לגובה אוטומטי

תרגיל 6 - שאלות תיאורטיות¶

ענו על השאלות הבאות:

מה ההבדל בין auto-fit ל-auto-fill? תנו דוגמה למצב שבו התוצאה שלהם שונה.
מתי עדיף להשתמש ב-Grid ומתי ב-Flexbox? תנו 3 דוגמאות לכל אחד.
מה ההבדל בין justify-items ל-justify-content בגריד?
מה זה implicit grid? מתי הוא נוצר?
איך אפשר למרכז אלמנט בודד בדיוק באמצע המסך באמצעות גריד? כתבו את ה-CSS הנדרש.