إنشاء تخطيطات حديثة بسهولة مع Gridlex CSS Grid System
وقد تحسنت تطوير الواجهة الأمامية جذريا مع إدخال المغلق فليكس بوكس. هذا يجعل الأمر أسهل بكثير إنشاء شبكات والأعمدة هذا التحول الطبيعي لتخطيطات استجابة.
بدلاً من ترميز شبكة Flexbox الخاصة بك من البداية ، من الأسهل بكثير استخدام أداة مثل Gridlex. هذه المكتبة المجانية مفتوحة المصدر خفيفة فائقة و جدا من السهل تخصيص.
كل ما تفعله هو إضافة ورقة أنماط Gridlex إلى صفحة الويب الخاصة بك و العمل مع الطبقات الشبكة لها. الأعمدة الداخلية تأخذ فئة .العقيد وأنت التفاف كل هذه داخل .شبكة حاوية. هذا يعرف كل عمود في نفس العرض ويخلق واجهة موحدة.
هذا الافتراضي يمكن التغلب عليها بإضافة تحجيم الطبقات إلى كل عمود. وبهذه الطريقة ، يمكنك الحصول على عمود بعرض 70٪ وعمود آخر بعرض 30٪ (مثل المحتوى / الشريط الجانبي).
ستجد الكثير من عينات الشبكة على الصفحة الرئيسية Gridlex مع العروض الحية و مقتطفات الشفرة لنسخ / لصق في موقعك. إنها مكتبة ضخمة بها الكثير فصول اختيارية لمساعدتك في بناء أبسط الشبكات لأي موقع ويب.
جميع الشبكات تضيف ما يصل الى مجموعه 12 أعمدة صغيرة, حتى تتمكن من تحديد مقدار المساحة التي يجب أن يشغلها كل عمود. قد يبدو هذا مربكًا ولكن من المنطقي عندما ترى العروض التوضيحية المرئية.
هنا أ مثال رمز تستخدم لشبكة أكبر بأطوال متفاوتة:
.........
نلاحظ أن .شبكة فئة تحتوي على كل شيء ومحاولة الأعمدة تنقسم إلى 12 أجزاء (في المثال سيكون هذا ⅓ عرض لكل منهما). ومع ذلك ، فإن الأعمدة الثابتة تمتد 2 و 6 cols على التوالي ، لذلك العمود الأول للغاية يستخدم العرض التلقائي بناء على ما تبقى.
باستخدام العمودين الآخرين ، يمكننا أن نستنتج أنه سيكون هناك 4 أعمدة (12-6-2) إلى اليسار ضرب ما مجموعه 12. الأمر كله بسيط للغاية في الرياضيات ، لكن أسماء الصف قد تكون مربكة. بمجرد بدء اللعب مع Gridlex في مشروع ، ستلتقط نظام التسمية بسرعة.
Gridlex هو حاليا في الإصدار 2.x وانها يجري تحديثها باستمرار على جيثب. مع نمو دعم المتصفح ، أضمن مزيدًا من الاهتمام بـ flexbox ، مع اعتماد المزيد من المواقع لهذا النموذج لشبكات الصفحات.
يمكنك حتى العثور على معرض كامل لمواقع الويب التي تشغّل Gridlex لمعرفة كيف يبدو ذلك عند تطبيقها على المواقع الحية.
إذا لم تستخدم Flexbox من قبل ، فيمكن أن تكون Gridlex مكتبة ممتعة للعب بها. لكنني أوصي أيضًا بالتدرب أولاً على استخدام ألعاب flexbox الممتعة لاختبار معرفتك ومساعدتك على فهم الأساسيات.
Gridlex هو متاح مجانا في GitHub repo أو يمكنك سحبها عبر npm أو كوخ في الريف. فإنه يوفر وثائق كاملة على الموقع الرئيسي ، بما في ذلك العروض التوضيحية للأعمدة متغيرة العرض واستعلامات الوسائط.
عندك السيطرة الكاملة على تصميم فليكس بوكس وفقط يأخذ بعض الطبقات CSS لتحقيق ذلك! وإذا كان لديك سؤال سريع أو تريد مشاركة موقع قمت بإنشائه باستخدام Gridlex ، فيمكنك إرسال رسالة إلى المنشئ على Twitterwebdevlint.
