CSS — Grid

مقدمة

CSS Grid نظام تخطيط ثنائي الأبعاد (صفوف + أعمدة).

ماذا ستتعلم؟

• grid-template-columns
• gap
• auto-fit/minmax
• المحاذاة

الصياغة

.grid{ display:grid; grid-template-columns: repeat(3, 1fr); }

مثال

.grid{ display:grid; gap:12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.card{ padding:14px; border:1px solid #e5e7eb; border-radius:16px; }

ملاحظات

• ممتاز لتخطيطات الصفحات.
• auto-fit + minmax يعطي تجاوب.

  جرّب بنفسك: افتح Playground: /ar/playground/html