شبكات التخطيط: الأعمدة والفواصل والهوامش
مكوّنات الشبكة
للشبكة ثلاثة مكوّنات. الأعمدة تحمل المحتوى. والفواصل هي الفراغات بين الأعمدة. والهوامش هي المسافة بين الشبكة وحافة الشاشة. وتمنح معًا كل عنصر مكانًا متوقعًا، فتبدو الصفحات متراصة وأسهل في المسح البصري.
- أعراف شائعة: 4 أعمدة على الهواتف، و8 على الأجهزة اللوحية، و12 على سطح المكتب.
- تعمل الفواصل والهوامش جيدًا عند أخذها من سلّم المسافات.
نقاط الانكسار وطول السطر والهوامش
حدّد نقاط الانكسار حيث ينكسر المحتوى، لا عند أحجام أجهزة بعينها. ضيّق نافذة المتصفح حتى يبدو التخطيط خاطئًا، ثم أضف نقطة انكسار عند ذلك العرض. أحجام الأجهزة تتغير كل عام، أما مشكلات المحتوى فلا.
حدّد أيضًا أقصى عرض للمحتوى. من الإرشادات الطباعية القديمة أن يكون السطر من 45 إلى 75 حرفًا تقريبًا لقراءة مريحة. الأسطر الأعرض تصعّب العثور على بداية السطر التالي.
تقيّد <code>;max-width: 65ch;</code>; عرض النص بسرعة.
تتدرج الهوامش والفواصل مع الشاشة. قد يستخدم الهاتف هامشًا بمقدار 16 بكسل وفاصلًا بمقدار 16 بكسل، بينما قد يستخدم تخطيط سطح المكتب فاصلًا بمقدار 24 أو 32 بكسل داخل حاوية متمركزة بأقصى عرض. وأخذ هذه القيم من سلّم المسافات يبقي الشبكة منسجمة مع بقية الواجهة.
- ليس من الضروري أن يمتد كل عنصر على أعمدة كثيرة. عمود مقال ضيق تحيط به أعمدة فارغة تخطيط صحيح.
- دع الصور والبطاقات تمتد على أعمدة كاملة لتتراصّ حوافها.
- اختبر التخطيط بمحتوى حقيقي، بما فيه الكلمات الطويلة والنصوص العربية الأطول.
CSS grid عمليًا
تبني CSS grid هذه التخطيطات مباشرة. فشبكة بطاقات متجاوبة لا تحتاج إلى media queries:
مثال على شبكة بطاقات متجاوبة تتكيف تلقائيًا مع المساحة المتاحة دون استعلامات وسائط: <code>;repeat(auto-fit, minmax(240px, 1fr))</code>; مع <code>;gap: 24px<;/code>;
يبلغ عرض كل عمود 240 بكسل على الأقل، ويضع المتصفح أكبر عدد ممكن منها حسب المساحة.
حافظ على اتساق المحاذاة
- اختر عدد الأعمدة وخذ الفواصل من سلّم المسافات.
- حاذِ العناصر إلى حواف الأعمدة لا إلى مواضع عشوائية.
- قيّد عرض النص قرب 65 حرفًا.
- اعثر على نقاط الانكسار بتغيير حجم المحتوى.
في التخطيطات من اليمين إلى اليسار، استخدم الخصائص المنطقية ليعكس التخطيط نفسه بشكل صحيح.
الاتساق في المحاذاة هو الفائدة الهادئة للشبكة. حين تتشارك العناوين والصور والأزرار الحافة نفسها، وهي اليمنى في التخطيطات العربية، تُقرأ الصفحة كسطح واحد منظم. اخرج عن الشبكة عن قصد فقط، مثل صورة بعرض كامل، واجعل الاستثناء واضحًا.
المصادر
- MDN Web Docs. CSS grid layout. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout
صيغ هذا الدليل بمساعدة الذكاء الاصطناعي اعتمادًا على معايير ومراجع عامة. وللنص الدقيق لأي معيار، ارجع إلى المصادر المذكورة أعلاه.