ما هي خاصية الشبكة؟

خاصية الشبكة هي خاصية مختصرة لصفوف قوالب الشبكة ، أعمدة قوالب الشبكة ، مساحات قوالب الشبكة ، صفوف الشبكة التلقائية ، أعمدة الشبكة التلقائية ، تدفق الشبكة التلقائي ، فجوة أعمدة الشبكة وخصائص شبكة الصف الفجوة.

هيكل الشبكة

تجعل خاصية الشبكة العناصر المراد عرضها مثل المصفوفة ⊞

 
 
 
 
 
 
 
 

في المغلق

#حاوية {
 عرض: الشبكة.
 }

في المثال ، يتم عرض #container كشبكة وسيتم عرض العنصر التابع لها كخلايا شبكة أو عناصر

التوافق المتصفح

إنه إثارة كبيرة ، أن IE و Edge و Firefox يدعم خاصية شبكة CSS . في الغالب ، يحتوي كل المتصفح على واجهة عرض شبكة جميلة في أدوات المطور.

خطوط الشبكة

خطوط الشبكة هي خطوط أفقية وعمودية ، وتستخدم لتحديد المواقع. يمكن أن يكون مؤشر الموضع عددًا صحيحًا (أعداد صحيحة وإيجابية على حد سواء).

الخصائص ← بداية الشبكة ، نهاية الشبكة ، نهاية الشبكة ، نهاية الشبكة.

عينة من الرموز :

#grid> div: nth-child (2) {
 شبكة عمود البدء: 2 ؛
 شبكة العمود نهاية: 3 ؛
 شبكة صف البداية: 2 ؛
 شبكة صف نهاية: 3؛
}

سيبدأ العنصر 2 في الخط العمودي الثاني في خط أفقي 2 وينتهي العنصر عند 3 خط عمودي و 3 خط عمودي.

خط الشبكة

خلية الشبكة

خلية الشبكة هي مسافة بين خطي شبكة رأسيين متجاورين وخطي شبكة أفقيين متجاورين.

خلية الشبكة

مسارات الشبكة

مسار الشبكة هو مسافة بين خطي شبكة متجاورتين. أي الصف ، الأعمدة.

شبكة المسار

شبكة المنطقة وفجوة الشبكة

منطقة الشبكة هي مجموعة من خلية واحدة أو أكثر.

شبكة الفجوة هي المسافة بين الصفوف والأعمدة. لها خاصية الاختزال من فجوة شبكة الصف و فجوة شبكة العمود.

شبكة الصف والعمود الشبكة

شبكة الصف هي خاصية مختصرة لبدء تشغيل الشبكة ونهاية الشبكة.

شبكة العمود هي خاصية اختصار لشبكة بداية العمود ونهاية شبكة العمود

صف الشبكة

الشبكة الصف - البداية → تحدد موضع بدء عنصر الشبكة في الصف

eg.grid-row-start: 2 → سيبدأ العنصر في الخط العمودي الثاني

تعيين نهاية الشبكة ← موضع نهاية عنصر الشبكة في الصف

eg.grid-end-end: 3 → سينتهي العنصر عند الخط العمودي الثاني

شبكة لصناعة السيارات في التدفق

يتحكم في كيفية عمل خوارزمية الموضع التلقائي. بشكل افتراضي ، تكون القيمة صفًا (يتم وضع العناصر في أساس الصف)

شبكة-لصناعة السيارات في تدفق: الصف.
شبكة-لصناعة السيارات في التدفق: عمود.
شبكة عمود التدفق التلقائي وشبكة صف تدفق السيارات

شبكة التدفق التلقائي: صف كثيف → يستخدم خوارزمية التعبئة "الكثيفة". ملء المساحة الحرة في الشبكة على أساس الصف.

شبكة التدفق التلقائي: عمود كثيف → يستخدم خوارزمية التعبئة "الكثيفة". ملء المساحة الحرة في الشبكة على أساس العمود

الشبكة الصريحة والشبكة الضمنية

الشبكة الواضحة هي شبكة يتم إنشاؤها بواسطة المستخدم باستخدام أعمدة شبكة القوالب وأعمدة شبكة القوالب

أعمدة شبكة القوالب: تكرار (3 ، 100 بكسل) ؛
صفوف شبكة القوالب: 100 بكسل × 100 بكسل ؛

يتم إنشاء الشبكة الضمنية من قبل المتصفح. يمكن تعديل حجم الشبكة الضمنية باستخدام أعمدة الشبكة التلقائية وخاصية صفوف الشبكة التلقائية.

أعمدة شبكة القوالب: تكرار (3 ، 100 بكسل) ؛
صفوف شبكة تلقائية: 100 بكسل ؛

ترتيب الشبكة:

يمكننا طلب العنصر حسب خاصية مساحة القالب.

يمكننا تغيير مساحة القالب في استعلام الوسائط وعرض بنية الشبكة الجديدة.

تحقق codepen لأكثر من ذلك.

بالنسبة إلى الشبكة ، نستخدم جميعها نظام شبكة التمهيد. قد يقوم Bootstrap بتغيير اسم فئة ما في كل إصدار (لكن ليس Like Angular ) ، لذلك نحن بحاجة إلى تذكر الإصدار الذي به اسم الفئة .

باستخدام خاصية شبكة CSS ، يمكننا (حتى في IE ) عرض العناصر في عرض الشبكة بسهولة.

شكرا لقراءتك! إذا أعجبك ذلك ، فالرجاء تقديم الدعم من خلال التصفيق ومشاركة المنشور. لا تتردد في ترك تعليق أدناه.