التخطيط: Flexbox وGrid

الأداتان الحديثتان لترتيب العناصر: Flexbox للخطوط، وGrid للشبكات ثنائية الأبعاد.

Foundation 35 دقيقة المتطلبات السابقة: أساسيات CSS

Flexbox مقابل Grid

Flexbox: بُعد واحد (صف أو عمود). مثاليّ لأشرطة التنقّل ومجموعات الأزرار والمحاذاة.
Grid: بُعدان (صفوف + أعمدة). مثاليّ لتخطيط الصفحات ولوحات التحكم والمعارض.

.nav { display: flex; gap: 12px; align-items: center; }
.layout { display: grid; grid-template-columns: 240px 1fr; gap: 24px; }

استخدم Grid حين تحتاج إلى التحكم في محورَين، وFlexbox حين يكفيك محور واحد.