الظهور في شبكة CSS

عند إنشاء تطبيق ويب، فإن أول الأشياء المطلوبة هي طريقة تخطيط محتوى التطبيق.

يستخدم الكثير من المصممين شبكات وهمية لتصميم المحتوى، سواء كان مخصّصًا لموقع إلكتروني أو تطبيق. تعمل مجموعة CSS جاهدةً لتسهيل عملية التخطيط، وقد أنشأت كجزء من ذلك وحدة تصميم شبكة CSS التي تظهر الآن في المتصفحات.

تتوفَّر هذه الميزة لتجربتها في Chrome خلف علامة تجريبية. ويتم تنفيذه أيضًا في متصفح IE منذ الإصدار 10، ومن المرجح أن يتم توفيره في معظم المتصفحات قريبًا.

الملخّص التنفيذي

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

إليك فيديو يعرض نظرة عامة يشرح كثيرًا طريقة عمل تنسيق شبكة CSS (يمكنك الاطّلاع على الشرائح هنا:

تجربة السمات والبيانات

أصبح استخدام "تخطيط شبكة CSS" في Chrome أمرًا سهلاً الآن. أول شيء عليك فعله هو تشغيل العلامة التجريبية لتفعيل هذه الميزة.

حمِّل أولاً عنوان URL لـ chrome://flags ثم مرِّر لأسفل إلى الخيار تفعيل ميزات نظام الويب الأساسي التجريبية كما هو موضّح أدناه:

ما عليك سوى النقر على تفعيل لتفعيل العلامة، ومن المفترض أن تظهر رسالة تطلب منك إعادة تشغيل المتصفِّح على النحو التالي:

الآن ما عليك سوى النقر على الزر إعادة التشغيل الآن لإعادة تشغيل المتصفح وستكون جاهزًا لتجربة تنسيق شبكة CSS.

يسرنا أن نعرف رأيك

يعتبر تنسيق CSS Grid Layout (تخطيط شبكة CSS) هو برنامج أولي جديد ورائع لمحتوى الويب، ولكن كالعادة كلنا حريصون على معرفة آراء المطورين حول هذا الموضوع. وهناك العديد من الطرق لتقديم الملاحظات. اترك تعليقًا هنا، وأرسل رسالة إلكترونية إلى قائمة مجموعة عمل CSS لـ W3C مع تضمين "[css-grid]" في سطر الموضوع، أو في سجل الأخطاء، أو المدونة وقم بتغريدة ما رأيك في ذلك. نتطلّع إلى رؤية التنسيقات الرائعة التي تنشئها باستخدام هذه الميزة الجديدة والمفيدة للغاية.