تعلم كيف تعمل خصائص شبكة CSS مع Griddy.io

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

لقد قمنا مؤخرًا بتغطية لعبة ممتعة لمساعدتك في معرفة خصائص شبكة CSS ، ولكن الألعاب لا تعلم دائمًا الأفكار العملية. حيث قد يكون Griddy أكثر فائدة.

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

Griddy هو في الواقع أداة تعليمية مجانية مصنوعة لمطوري الواجهة الأمامية من يريد أن يفهم المزيد عن شبكات CSS.

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

يحتوي webapp على أقسام مختلفة مع حقول إدخال مختلفة لتحرير خصائص الشبكة. هذه تتيح لك إعادة تهيئة صفوف / أعمدة الشبكة ويعلمك بالضبط ما تفعله على طول الطريق.

يمكنك تحديد فجوات الأعمدة ومحاذاة عناصر الشبكة واللعب بإعدادات الضبط - كل ذلك من خلال حقول النماذج هذه. كلما قمت بإجراء تغيير ، فسيتم تحديث المعاينة تلقائيًا ومقتطف الشفرة الصغيرة تحتها.

وبهذه الطريقة ، يمكنك فقط نسخ ولصق CSS في ورقة الأنماط الخاصة بك إذا كنت تريد المزيد من الفوضى. لطيف جدا!

قد لا يكون Griddy ممتعًا مثل Grid Garden ولكن Griddy هي طريقة عملية للتعلم و فهم بصريا كيف تؤثر خصائص شبكة CSS على عناصر الصفحة.

للتجول بها ، ما عليك سوى زيارة صفحة Griddy الرئيسية. يمكنك أيضًا مشاركة أفكارك أو أسئلتك مع المنشئ على Twitterdrewisthe.