مقدمة لوحدة تخطيط شبكة CSS

كان مرة واحدة الجداول, ثم هوامش ويطفو, ثم حول flexbox و الأن شبكة: CSS توجه دائمًا نحو طرق جديدة وأفضل لتخفيف الوظيفة القديمة تخطيطات الويب الترميز. ال نموذج تخطيط الشبكة المغلق يمكن إنشاء وتحديث التخطيط على طول محورين: الأفقي والرأسي, تؤثر على كل من العرض والارتفاع من العناصر.

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

دعم المتصفح

اعتبارًا من كتابة هذه المقالة ، لا تدعم CSS Grid Module إلا بواسطة أحدث متصفح IE و Edge. شبكة CSS هي في المرحلة التجريبية في المتصفحات الرئيسية الأخرى التي لديك ل تمكين الدعم يدويا:

• ثعلب النار: اضغط على Shift + F2, أدخل الأمر التالي في شريط الإدخال GCLI الذي ظهر في أسفل المتصفح: pref set layout.css.grid.enabled true.
• كروم: تصفح الكروم: // الأعلام URL وتمكين ميزات منصة الويب التجريبية.

كل دعم المتصفح الرئيسي من المرجح أن تأتي بحلول أوائل / منتصف عام 2017.

شبكة عينة

إلى تحويل عنصر إلى حاوية الشبكة يمكنك استخدام واحد من هؤلاء الثلاثة عرض الخصائص:

1. عرض: الشبكة. - العنصر هو تحويلها إلى حاوية شبكة كتلة
2. عرض: مضمنة الشبكة. - العنصر هو تحويلها إلى حاوية شبكة مضمنة
3. عرض: subgrid. - إذا كان العنصر عنصر شبكة فهو تحويلها إلى مجموعة فرعية يتجاهل قالب الشبكة وخصائص فجوة الشبكة

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

نحن بصدد خلق شبكة مع خمسة أقسام (مناطق الشبكة): أعلى ، أسفل ، يسار ، يمين ووسط. يتكون HTML من خمسة divs داخل حاوية div.

 
 
أعلى
 
اليسار
 
مركز
 
حق
 
الأسفل
 
 

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

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

 .شبكة حاوية العرض: 500 بكسل ؛ الارتفاع: 500 بكسل ؛ عرض: الشبكة. مساحات شبكة القوالب: "top top top" "left left right" "bottom bottom bottom"؛  .grid-top network-area: top؛  .غرفة سفلية شبكة منطقة: أسفل ؛  .grid-left network-area: left؛  .grid-right network-area: right؛  .grid-centre network-area: center؛  

لذلك هذا الرمز يخلق شبكة مع ثلاثة صفوف وأعمدة. ال أعلى يحتل العنصر مساحة تمتد عبرها ثلاثة أعمدة في الصف الأول و ال الأسفل يمتد البند ثلاثة أعمدة في الصف الأخير. كل من اليسار, مركز و حق العناصر يأخذ عمود واحد في الصف الأوسط.

الآن نحن بحاجة إلى تعيين الأبعاد لهذه الصفوف والأعمدة. ال شبكة قالب الأعمدة و شبكة قالب الصفوف الخصائص تحديد حجم المسار الشبكة (صف أو عمود).

 .شبكة حاوية العرض: 500 بكسل ؛ الارتفاع: 500 بكسل ؛ عرض: الشبكة. مساحات شبكة القوالب: "top top top" "left left right" "bottom bottom bottom"؛ شبكة أعمدة القوالب: 100px auto 100px؛ شبكة القوالب الصفوف: 50px auto 150px؛  

هكذا تبدو شبكة CSS لدينا الآن (مع بعض الأنماط الإضافية):

المسافة بين عناصر الشبكة

يمكنك إضافة مساحة فارغة بين الأعمدة والصفوف استخدام شبكة عمود الفجوة و شبكة الصف الفجوة, أو ممتلكاتهم منذ فترة طويلة شبكة الفجوة.

 .شبكة حاوية العرض: 500 بكسل ؛ الارتفاع: 500 بكسل ؛ عرض: الشبكة. مساحات شبكة القوالب: "top top top" "left left right" "bottom bottom bottom"؛ شبكة أعمدة القوالب: 100px auto 100px؛ شبكة القوالب الصفوف: 50px auto 150px؛ شبكة الفجوة: 5px 5px ؛  

أدناه يمكنك أن ترى أن شبكة الفجوة خاصية إضافة الثغرات بين عناصر الشبكة في الواقع.

محاذاة محتوى الشبكة والعناصر

ال تبرير المحتوى خاصية حاوية الشبكة (.شبكة حاوية) محاذاة محتوى الشبكة على طول المحور المضمن (المحور الأفقي) والممتلكات محاذاة المحتوى, يحاذي محتوى الشبكة على طول محور الكتلة (المحور العمودي). كل الخصائص يمكن أن يكون لها واحدة من هذه القيم: بداية, النهاية, مركز, الفضاء بين, الفضاء حول و الفضاء بالتساوي.

حيثما أمكن ، حجم المسار (الصف أو العمود) يتقلص لتناسب المحتوى عندما محاذاة. ألق نظرة على لقطات محتويات الشبكة تتماشى مع القيم المختلفة أدناه.

تبرير المحتوى: البدء ؛

تبرير المحتوى: النهاية ؛

تبرير المحتوى: المركز ؛

تبرير المحتوى: المسافة بين ؛

تبرير المحتوى: الفضاء حولها ؛

تبرير المحتوى: الفضاء بالتساوي.

محاذاة المحتوى: البداية ؛

محاذاة المحتوى: النهاية ؛

محاذاة المحتوى: المركز ؛

محاذاة المحتوى: المسافة بين ؛

محاذاة المحتوى: الفضاء حولها ؛

محاذاة المحتوى: الفضاء بالتساوي.

كلا ال تبرير المحتوى و محاذاة المحتوى الخصائص محاذاة المحتوى بأكمله داخل الشبكة.

إلى محاذاة العناصر الفردية داخل مناطق الشبكة الخاصة بهم, استخدم ال زوج آخر من خصائص المحاذاة: تبرير البنود و البنود محاذاة. يمكن أن يحتوي كلاهما على واحدة من هذه القيمة: بداية, النهاية, مركز, خط الأساس (محاذاة العناصر على طول خط الشبكة الأساسي للمنطقة) و تمتد (العناصر تملأ منطقتهم بالكامل).