الخلاصة

  • عدّدت أول مسودة علنية لـ Grid Layout نشرها W3C في أبريل 2011 الجداول وJavaScript والعناصر العائمة المضبوطة بالقياس ضمن حلول تخطيط تطبيقات الويب الهشة.
  • وصفت مسودة التوصية المرشحة في ديسمبر 2017 حاوية الشبكة ومساراتها وخطوطها ومناطقها وأحجامها المرنة وتوزيع العناصر آليًا، مع بقاء بنية المحتوى في HTML.

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

انطلقت أول مسودة عمل علنية لـ Grid Layout نشرتها W3C في 7 أبريل 2011 من هذه الورشة. احتاجت تطبيقات الويب إلى تقسيمات أعقد من تدفق الوثيقة، فاستخدم المؤلفون الجداول والشيفرات والقياسات المتأنية للعناصر العائمة. تغيّر المساحة المتاحة كان يكشف هشاشة البناء. تثبيت العرض يترك فراغًا في شاشة ويخنق المحتوى في أخرى.

اقترحت المسودة تقسيم المساحة المرئية إلى صفوف وأعمدة ثم وضع أجزاء الصفحة بالنسبة إلى خطوط الشبكة وخلاياها. هنا فرق أساسي عن جدول البيانات: صفوف الجدول وخلاياه تصف علاقة في المحتوى؛ الشبكة المرئية تحدد مكان ظهور أجزاء الوثيقة. يمكن لقائمة جانبية أن تقف بجوار مقال من دون أن يتحول المقال إلى خلية بيانات.

كانت أسماء الأدوات في مخطط 2011 لا تزال تتغير. ظهرت في الأمثلة grid-columns وgrid-rows، وهما غير الصياغة التي استقرت لاحقًا. لا تُبنى دار اليوم من رسم أولي لم يكتمل. الفكرة التي استمرت هي وصف المسارات والحدود والمواقع والأحجام بحيث يحسب المتصفح النتيجة بحسب المساحة الحاضرة.

في مسودة التوصية المرشحة الصادرة عن W3C في 14 ديسمبر 2017، صارت الحاوية وعناصرها موصوفة بالتفصيل. يعرّف المؤلف مسارات أفقية وعمودية، ويسمي خطوطًا أو مناطق، ويثبت مواقع ما يحتاج عنوانًا محددًا، ويترك غيره للتوزيع الآلي. للمسارات أحجام ثابتة أو مرنة؛ وتوزع وحدة fr المساحة الحرة. لم تعد الصفحة رزمة إحداثيات تصلح لشاشة واحدة.

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

تفكر Grid في اتجاهين معًا. يمتد العنوان عبر أعمدة، وتحتل القائمة مسارًا، وتصطف ألواح المحتوى أسفلها. توجد أدوات أخرى لأنواع أخرى من التدفق، أما هذه القصة فتخص مخطط غرف الصفحة. المائدة تستطيع العودة إلى وظيفتها الأصلية.

حرية نقل الأجزاء بصريًا لا تغيّر ترتيب الوثيقة في HTML. ما يظهر في زاوية الشاشة قد يُقرأ وفق ترتيب المصدر في وسائل قراءة وتنقل أخرى. يتعامل نص 2017 مع هذه المسافة بجدية. وضع الخاتمة أعلى اليمين لا يكتب المقدمة التي تشرحها. يمكن تحريك الأثاث؛ مسار القراءة يحتاج هندسة مستقلة.

يسجل تاريخ نشر W3C لـ CSS Grid Layout Level 1 مسودة أبريل 2011 ومراحل التوصية المرشحة في 2016 و2017. هذه تواريخ الوثائق. وتُظهر الطريق من الجداول والعوامات المؤقتة إلى نموذج يصف المسارات والمناطق والتوزيع والقياس المرن.

القارئ لا يطلب رؤية مخطط الصفوف. لكنه يعرف فورًا حين تضغط القائمة على المقال في الهاتف، أو تتزاحم البطاقات. Grid جعلت الناشر يصف الغرف، والمتصفح يحسبها وفق الشاشة الواقعية. نالت المائدة أخيرًا مهمة أليق بها: حمل القهوة.