גריד פרויקטים רספונסיבי
CSS בלי לכתוב CSS: פריסות עם Grid
כל תיק עבודות טוב צריך דרך נקייה להציג את העבודות שלכם. הדפוס הקלאסי הוא גריד של כרטיסי פרויקטים — שורות ועמודות מסודרות שנערכות מחדש אוטומטית כשהמסך משנה גודל.
בדרך הישנה נאבקו ב-floats וב-clearfixes. בדרך החדשה? אתם מתארים מה אתם רוצים — "שלוש עמודות שוות עם רווח ביניהן" — ומחלקות ה-grid של Tailwind עושות את השאר. בלי קובץ CSS בכלל.
בשיעור הזה תבנו גריד פרויקטים רספונסיבי: כותרת, ואז מיכל grid שמחזיק שלושה כרטיסים. בסוף תבינו את grid, את grid-cols-3 ואת gap — שלושת הכלים שתחזרו אליהם שוב ושוב.
הוראות
הוסיפו כותרת מדור h2 מעל הגריד, כדי שהמבקרים יידעו על מה הם מסתכלים.
רמז: השתמשו ב: `<h2 class="text-3xl font-bold mb-8 text-center">פרויקטים נבחרים</h2>`
איפה כותבים את זה?
<!-- בנו כאן את גריד הפרויקטים -->כתבו את זה בשורה 12 — מתחת להערה הזאת, אחרי הקוד שכבר הוספתם.
צרו div שמשמש כמיכל גריד עם grid ועם רווח (gap) בין הכרטיסים.
גרמו לגריד להציג שלוש עמודות שוות במסכים בינוניים ומעלה.
הוסיפו לפחות כרטיס פרויקט אחד בתוך הגריד: אלמנט article עם כותרת ותיאור.
הקוד שלכם
אני אבנה עבורכם את השלב. אין צורך לכתוב או להבין קוד — אפשר להשתמש בכפתור המודרך או לתאר במילים מה תרצו. השלב הזה: הוסיפו כותרת מדור h2 מעל הגריד, כדי שהמבקרים יידעו על מה הם מסתכלים.