טיפים על Media Query ו־Grid ב־Tailwind CSS: הכל מההתחלה ועד האומנות

ולשלב הבא במערכת היחסים שלנו עם Tailwind נקרע שני נושאים מרכזיים: 😎 הראשון הוא Media Query והשני הוא Grid. 🙂 אם אין לכם מושג מה זה אומר בכלל, ובכן, ברוכים הבאים למשפחה... ונפרט בהמשך. 🤔 *בדוגמא שאצרף בתגובה הראשונה תוכלו לראות את ההגדרות בפעילות מבצעית. 😌 ולמנה העיקרית: 1. על Media Query : (או בעברית: מדיה קווארי) תקציר: נועד להחיל הגדרות css שונות על גדלי מסך שונים (בדרך כלל) ועובד בערך כמו if. ישנם מספר Breakpoint מוגדרים מראש בTailwind. * גדלים שנחשבים בעולם כסטנדרט כולל השמות שלהם (בערך כמו מידות של בגדים או נעליים להבדיל). והדרך בTailwind היא לכתוב את השם של הBreakpoint ואחריו ":" ואת ההחרגה שתרצו לעשות. שימו לב שהעסק עובד על דרך הmin-width כלומר מהגודל שבחרתם ומעלה (כמו המודד גובה בכניסה למגלשה הצהובה באשקלונה ימח שמו שהשמיד שמחת חיים לפחות לחצי מדינה). ולמה? 😏 לקיים מקרא שכתוב : mobile-first. 2. ועל Grid (או בעברית גריד). תקציר: דרך מתקדמת לסידור אלמנטים בצורה דו ממדית (להבדיל מflex שנועד למימד אחד, ומתורת המיתרים שנועדה להשד יודע כמה) בדיוק כמו בcss אנחנו מגדירים משו כgrid ואז מגיע החלק האומנותי: 😎 אם תכתבו grid-cols-1 תקבלו grid-template-columns: repeat(1, minmax(0, 1fr)). ומה לדעתכם אומר: grid-cols-2? בדיוק!