شرح صفوف ومحتوى الفقرة
يتفوق نظام CSS Grid Layout في تقسيم الصفحة عن الأنظمة الأخري مثل نظام [float-position-flex] من حيث الطبقات ومن حيث علاقة العناصر بعضها لبعض ومن حيث علاقة الحاوية بالعناصر الداخلية ومن حيث التحكم في جميع العناصر معاً مما يعني سرعة إنهاء تصميم صفحة ويب في أسرع وقت ممكن لانها مبنية علي أجزاء وكل جزئ يتكون من حاويات Grid وصفحة HTML جميعها عبارة عن حاوية.
CSS grid layout module وحدة تخطيط grid تتكون من:
- grid container حاوية grid وهي عبارة عن عنصر parent أب يحتوي علي عناصر داخلية children تطبق عليه خاصية display:grid في لغة CSS.
- grid items هي عبارة عن العناصر الداخلية children الموجدة داخل حاوية grid تطبق عليها قواعد عن طريق parent الأب وهو grid container وتسمي ايضاً grid elements.
- grid columns أعمدة grid هي عبارة عن vertical lines خطوط رأسية مكونة من مجموعة items عناصر داخل حاوية grid وهي عناصر علي خط واحد رأسي.
- grid rows صفوف grid هي عبارة عن horizontal lines خطوط عرضية مكونة من مجموعة items عناصر داخل حاوية grid وهي عناصر علي خط واحد أفقي.
- grid gaps تسمي الفجوات بين أعمدة grid أو بين صفوف grid ب gaps.
- columns lines تسمي نهاية كل عمود من أعمدة حاوية grid بخطوط الأعمدة.
- rows lines تسمي نهاية كل صف من صفوف حاوية grid بخطوط الصفوف.
CSS grid layout module
تسمعي مجموعة عناصر لها علاقة ببعض داخل حاوية واحدة بوحدة تخطيط grid في لغة CSS.