أداة CSS Grid التفاعلي

CSS Grid هو أقوى نظام تخطيط في CSS، صُمّم خصيصًا للتعامل مع بُعدين معًا: الصفوف والأعمدة في آن واحد. بينما يرتّب Flexbox العناصر في اتجاه واحد، يتيح لك Grid بناء شبكات كاملة كصفحات المواقع ومعارض الصور بسهولة لافتة.

بدل حساب المسافات يدويًا، حرّك الخصائص في الأداة بالأسفل وشاهد كيف تتوزّع الخلايا لحظيًا، ثم انسخ كود CSS المتولّد إلى مشروعك مباشرة.

جرّب بنفسك

الإعدادات

نمط الأعمدة

عدد الأعمدة (N)

gap (px)

min-width (px)

عدد العناصر

CSS الناتج

display: grid;

ملاحظة: وضع auto-fit + minmax هو الأفضل للتجاوب مع الشاشات.

المعاينة

جرّب تصغير نافذة المتصفح وشاهد كيف auto-fit يتكيف تلقائيًا

متى تستخدم هذه الخاصية؟

استخدم Grid عندما يكون تخطيطك ثنائي الأبعاد (صفوف وأعمدة معًا) أو عندما تريد تحكّمًا دقيقًا في توزيع المساحة:

تخطيط صفحة كامل: رأس، شريط جانبي، محتوى، تذييل
معارض صور أو بطاقات بشبكة منتظمة
لوحات تحكّم بعدة أقسام مرتّبة

أما إن كنت ترتّب عناصر في اتجاه واحد فقط (صف أو عمود)، فاستخدم أداة Flexbox فهي أبسط لذلك.

أمثلة عملية

مثال شائع: شبكة من ثلاثة أعمدة متساوية مع مسافة بينها.

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

جرّب تغيير عدد الأعمدة وقيمة gap في الأداة بالأعلى لترى كيف تتكيّف الشبكة فورًا.