أداة CSS Grid التفاعلي
جرّب بنفسك
الإعدادات
CSS الناتج
display: grid;✅ تم النسخ
ملاحظة: وضع auto-fit + minmax هو الأفضل للتجاوب مع الشاشات.
المعاينة
جرّب تصغير نافذة المتصفح وشاهد كيف auto-fit يتكيف تلقائيًا
ما هو CSS Grid؟
CSS Grid نظام تخطيط ثنائي البُعد: يتحكّم في الصفوف والأعمدة معًا في آنٍ واحد. بينما يرتّب Flexbox العناصر في خطّ واحد، يبني Grid شبكة كاملة — تمامًا كجدول، لكن بمرونة أكبر بكثير وبلا وسوم جدول.
تجعل الحاوية شبكة بكتابة display: grid، ثم تحدّد أعمدتها بـ grid-template-columns وصفوفها بـ grid-template-rows، فتنساب العناصر داخل الخلايا تلقائيًا.
🔑 اربطها بشيء تعرفه
تخيّل ورقة رسم بيانيّ (مربّعات): أنت تقرّر عدد الأعمدة وعرض كل عمود، وعدد الصفوف وارتفاع كل صف، ثم تضع كل عنصر في الخلية التي تريدها. Grid يمنحك هذا التحكّم الكامل في الشبكة.
متى تستخدمها؟
تخطيط صفحة كامل
رأس، شريط جانبي، محتوى، تذييل — في شبكة واحدة منظّمة.
معارض الصور
شبكة صور متساوية تتكيّف مع عرض الشاشة تلقائيًا.
بطاقات المنتجات
صفوف وأعمدة منتظمة تلتفّ حسب المساحة المتاحة.
لوحات التحكّم (Dashboards)
مربّعات بأحجام مختلفة في تخطيط دقيق.
أهم خصائص Grid
| الخاصية | ماذا تفعل؟ | قيم شائعة |
|---|---|---|
| display: grid | يُفعّل الشبكة على الحاوية. | grid |
| grid-template-columns | عدد الأعمدة وعرض كلٍّ منها. | 1fr 1fr / repeat(3,1fr) |
| grid-template-rows | عدد الصفوف وارتفاع كلٍّ منها. | auto / 100px |
| gap | المسافة بين الخلايا. | 16px / 1rem |
| grid-column | كم عمودًا يمتدّ العنصر. | span 2 / 1 / 3 |
| fr | وحدة تقسيم المساحة المتاحة نسبيًا. | 1fr / 2fr |
مثال عملي
شبكة من ثلاثة أعمدة متساوية بمسافة بينها:
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 أعمدة متساوية */
gap: 16px;
}وحدة fr تعني «جزء من المساحة المتاحة». repeat(3, 1fr) تقسم العرض إلى ثلاثة أجزاء متساوية — ولو تغيّر عرض الشاشة تبقى النسب محفوظة.
أخطاء شائعة
- 1. استعمال البكسل الثابت بدل
fr: يكسر التجاوب.frيتكيّف مع المساحة، والبكسل لا. - 2. نسيان
gapواللجوء للهوامش: ينتج مسافات غير منتظمة على الأطراف. - 3. الخلط بين ترقيم الخطوط والخلايا:
grid-column: 1 / 3تعني «من الخط 1 إلى الخط 3» أي عمودين — لا ثلاثة.
كيف تستفيد من الأداة أعلاه؟
غيّر عدد الأعمدة وقيم fr في الأداة أعلاه، وشاهد كيف تُعاد ترتيب الخلايا فورًا. جرّب 1fr 2fr لترى كيف يأخذ العمود الثاني ضعف الأول.
أسئلة شائعة
1fr 1fr عمودان متساويان، و1fr 2fr يجعل الثاني ضعف الأول. تتكيّف تلقائيًا مع عرض الحاوية. repeat(auto-fit, minmax(200px, 1fr)) — تنشئ أكبر عدد ممكن من الأعمدة بعرض لا يقلّ عن 200px، وتلتفّ وحدها عند الضيق.