66. مقدمة في تخطيط CSS Grid (نظام ثنائي الأبعاد)
CSS Grid هو نظام التخطيط الأقوى، والمصمم لإنشاء تخطيطات صفحات معقدة ثنائية الأبعاد (صفوف وأعمدة). بينما يستخدم Flexbox لترتيب المكونات في اتجاه واحد، يستخدم Grid لتخطيط هيكل الصفحة بالكامل.
نموذج الشبكة (Grid Model)
يتضمن Grid ثلاثة مفاهيم رئيسية:
- حاوية الشبكة (Grid Container): العنصر الأب حيث يتم تطبيق
display: grid;. - عناصر الشبكة (Grid Items): الأطفال المباشرون للحاوية.
- خطوط ومسارات ومناطق الشبكة: الهيكل الذي يحدد التخطيط.
- المسارات (Tracks): المساحة بين خطي شبكة (الأعمدة والصفوف).
- الخطوط (Lines): خطوط التقسيم الأفقية والرأسية التي تشكل هيكل الشبكة.
البداية
لتفعيل Grid ، قم بتطبيق خاصية display على الأب:
html
css .grid-container { display: grid; /* بدون تحديد الصفوف/الأعمدة، تتراكم العناصر عمودياً ببساطة، عنصر واحد لكل صف */ }
فائدة رئيسية: يسمح لك Grid بتعريف هيكل الحاوية أولاً، ثم وضع العناصر في المكان الذي تريده بالضبط في ذلك الهيكل.