CSS: ممارسة Grid CSS
آخر تحديث: 2026-10-13
1. نظام شبكة 12 عمود
شبكة 12 عمود هو نظام تخطيط كلاسيكي في تطوير الويب. إليك كيفية تنفيذه بـ CSS Grid:
▶ مثال
▶ جرّب الكود2. أنماط تخطيط شائعة
(1) تخطيط الكأس المقدس
نمط تخطيط الصفحة الأكثر شيوعاً:
▶ مثال
▶ جرّب الكود(2) شبكة بطاقات متجاوبة
▶ مثال
▶ جرّب الكود❓ أسئلة شائعة
س لماذا تستخدم أنظمة الشبكة 12 عموداً؟
ج 12 يقبل القسمة على 2 و3 و4 و6 — أقصى مرونة. يمكنك إنشاء نسب 1/2 و1/3 و1/4 و1/6 و2/3 و3/4. Bootstrap وغيرها من الأُطر تستخدم شبكات 12 عموداً — هو المعيار الصناعي.
س شبكة مكتوبة يدوياً مقابل شبكة Bootstrap؟
ج الكتابة اليدوية تساعدك على فهم المبادئ؛ Bootstrap هو تنفيذ مُجمّع. المشاريع الحقيقية تستخدم Bootstrap للكفاءة، لكن فهم المبادئ يساعد عندما لا تلبي الأُطر احتياجات محددة.
س شبكة Flex مقابل شبكة Grid — أيهما أفضل؟
ج لكل نقاط قوة. Flex يناسب الترتيبات أحادية البُعد لكنه لا يستطيع المحاذاة عبر الصفوف. Grid لديه قدرات ثنائية البُعد أقوى. لتوزيع بسيط لصف واحد، Flex يكفي؛ لمحاذاة خطوط الشبكة، استخدم Grid.
📖 ملخص
- أنظمة الشبكة هي حل تخطيط كلاسيكي مُجرب بالزمن
- تنفيذ شبكة 12 عموداً بـ Flexbox ليس معقداً — المفتاح هو فهم العروض النسبية و flex-wrap
- 12 عموداً تقدم تركيبات مرنة مع نقاط توقف متجاوبة
- بينما تستخدم مشاريع كثيرة شبكات Bootstrap أو Tailwind، التنفيذ مرة واحدة بنفسك يُعلّم المبادئ الأساسية حقاً
📝 تمارين
- نفّذ نظام شبكة 12 عموداً كاملاً، أنشئ صفحة HTML تعرض تركيبات أعمدة مختلفة (3-3-3-3، 4-4-4، 2-8-2، إلخ).
- استخدم الشبكة المتجاوبة لإظهار عمود واحد على المحمول، اثنان على جهاز لوحي، أربعة على سطح المكتب.
- استخدم
col-offset-3لتوسيط كتلة محتوى في الصفحة. - أعد تنفيذ شبكة 12 عموداً باستخدام Grid، وقارن اختلافات الكود.
