عند إنشاء تطبيق ويب، من أوّل الأمور التي تحتاج إليها هي طريقة لعرض محتوى تطبيقك.
يستخدم الكثير من المصمّمين شبكات خيالية لعرض المحتوى، سواء كان ذلك لموقع إلكتروني أو تطبيق. عملت مجموعة CSS جاهدة لتسهيل التنسيقات، وضمن ذلك، تم إنشاء وحدة تنسيق الشبكة في CSS التي تظهر الآن في المتصفّحات.
تتوفّر هذه الميزة للتجربة في Chrome من خلال ميزة تجريبية. وقد تم تنفيذه أيضًا في Internet Explorer منذ الإصدار 10، ومن المرجّح أن يظهر في معظم المتصفحات قريبًا.
الملخص التنفيذي
- يتيح لك تنسيق CSS Grid تحديد الصفوف والأعمدة لتصميمك.
- يمكن للشبكات التكيّف للاستفادة من المساحة المتاحة.
- يمكن أن يكون ترتيب المحتوى مستقلاً عن ترتيب عرض حاوية الشبكة
- يمكن أن تتغيّر التنسيقات استنادًا إلى طلبات الاستعلام عن الوسائط، ما يسهّل التصميم السريع الاستجابة.
- يمكن أن يتداخل المحتوى (ما يتيح تصميمًا لا يمكن تحقيقه باستخدام طرق أخرى)
- تنسيق الشبكة سريع
في ما يلي فيديو يقدّم نظرة عامة ويوضّح الكثير من المعلومات حول آلية عمل "شبكة CSS" (العروض التقديمية هنا:
جرّبه الآن
أصبح استخدام ميزة "شبكة التخطيط" في CSS في Chrome أمرًا سهلاً الآن. أول إجراء عليك تنفيذه هو تفعيل العلامة التجريبية لتفعيل الميزة.
حمِّل أولاً عنوان URL chrome://flags وانتقِل للأسفل إلى خيار تفعيل ميزات Web Platform التجريبية كما هو موضّح أدناه:
ما عليك سوى النقر على تفعيل لتفعيل العلامة، ومن المفترض أن يظهر لك طلب لإعادة تشغيل المتصفّح على النحو التالي:
ما عليك الآن سوى النقر على الزر إعادة التشغيل الآن لإعادة تشغيل المتصفّح، وسيكون بإمكانك تجربة CSS Grid Layout.
يسرنا أن نعرف رأيك
إنّ CSS Grid Layout هو عنصر أساسي جديد رائع لمحتوى الويب، ولكن كعادتنا، نحن جميعًا حريصون على معرفة رأي المطوّرين فيه. هناك العديد من الطرق لتقديم الملاحظات، مثل كتابة تعليق هنا أو إرسال رسالة إلكترونية إلى قائمة مجموعة عمل CSS في W3C مع تضمين "[css-grid]" في سطر الموضوع أو تسجيل الأخطاء أو كتابة مدوّنة ونشر تغريدة تتضمن رأيك. نحن نتطلّع إلى رؤية التنسيقات الرائعة التي تنشئها باستخدام هذه الميزة الجديدة المفيدة للغاية.