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