Grid.css - نظام الشبكة الدنيا لمطوري الويب

أطر أمامية أكبر مثل Bootstrap تأتي مع الاجهزة الشبكة الخاصة. لكنهم أيضًا تأتي مع الكثير من الأمتعة في شكل عناصر الصفحة المصممة مسبقا ومكونات جافا سكريبت.

إذا كنت تبحث عن نظام شبكة أصغر حجماً وأكثر بساطة ، فأنت ستحب Grid.css.

هذه المكتبة الحرة مفتوحة المصدر تأتي معبأة مع التقليدية نظام شبكة 12-col يمكنك هيكل لأي تخطيط. إن CSS سهل الاستخدام حقًا والملف نفسه يقيس فقط 560 بايت (هذا نصف كيلوبايت!)

الشروع في العمل سهل للغاية وتحتاج فقط ملف CSS واحد إضافة إلى رأسك.

يمكنك العثور على رابط التحميل المباشر على Grid.css الصفحة الرئيسية أو في GitHub repo الرسمي. هل يمكن حتى استخدام نسخة CDN الخام لتضمين هذا الملف مباشرة من جيثب دون استضافته بنفسك.

الآن ، يمكنك إعداد بنية العمود الخاص بك باستخدام أي العناصر التي تريدها (divs ، أقسام ، إلخ).

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

وهنا ل مثال مقتطف من العرض التوضيحي:

يمكنك استخدام أي مجموعة من فئات الأعمدة التي تريدها ، طالما كانت كذلك إضافة ما يصل إلى 12.

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

بطبيعة الحال ، هذه المكتبة هي 100٪ مجانا و المصدر المفتوح, لذلك أنت حر في إجراء التعديلات كما تريد.

المبدع احمد طارق, أدلى أيضا بوتنز وهو البديل من العديد من مجموعات زر واجهة المستخدم هناك. هذا أزواج لطيف مع Grid.css, لذلك كلاهما مكتبات ممتازة لالتقاط عند بدء مشروع ويب جديد.