الهدف
بنهاية الدرس تبني layout بـ Flexbox و Grid، تكتب responsive design بـ Tailwind من الـ mobile لـ desktop، وعندك card grid كامل يتكيّف مع حجم الشاشة.
ليش هذا الحين؟
ترى layout هو أكثر شي يوقف الـ founders — يقعدون ساعات يحاولون يحطون شي في النص. Flexbox و Grid يحلّون 90% من المشاكل، و Tailwind يخلي كتابة CSS أسرع وأنظف من أي طريقة ثانية. و responsive مو اختياري — أكثر من 60% من زوار أي site يجون من الموبايل.
الفكرة
Flexbox = layout أحادي البعد. يشتغل على محور واحد — إما أفقي أو عمودي. مثالي للـ nav bars وصفوف الـ cards وتوزيع العناصر في خط.
Flex Row: [item1] [item2] [item3] ← أفقي
Flex Col: [item1]
[item2]
[item3] ← عمودي
CSS Grid = layout ثنائي البعد. يشتغل على صفوف وأعمدة في نفس الوقت. مثالي لبنية الصفحة الكاملة وعرض الـ cards.
Grid:
[header ]
[sidebar ] [main content ]
[footer ]
متى تستخدم أي واحد فيهم؟
- Nav bar، صف cards، header: Flexbox
- بنية الصفحة، card grid، magazine layout: Grid
- مو لازم تختار — وايد من الـ layouts تجمع الاثنين
Tailwind = utility-first CSS. بدل ما تكتب CSS منفصل، تحط classes مباشرة على الـ HTML. أسرع بوايد، وما تحتاج تبدّل بين ملفات.
// CSS عادي
// button.css: .btn { background: blue; padding: 8px 16px; border-radius: 6px; }
// JSX: <button className="btn">Click</button>
// Tailwind
<button className="bg-blue-500 px-4 py-2 rounded">Click</button>
Responsive Design = mobile-first. تبدأ بتصميم الموبايل (أصغر شاشة) وتضيف breakpoints للشاشات الأكبر.
Tailwind breakpoints:
- Default (بدون prefix): < 640px → موبايل
sm:→ ≥ 640pxmd:→ ≥ 768px (تابلت)lg:→ ≥ 1024px (desktop)xl:→ ≥ 1280px