أفضل الممارسات مع تخطيط شبكة CSS

يبدو أن السؤال الأكثر شيوعًا - الآن بعد أن استخدم الأشخاص CSS Grid Layout في الإنتاج - هو "ما هي أفضل الممارسات؟" الإجابة المختصرة على هذا السؤال هي استخدام طريقة التخطيط على النحو المحدد في المواصفات. الأجزاء المعينة من المواصفات التي تختار استخدامها ، وبالفعل كيف تجمع بين Grid وأساليب التخطيط الأخرى مثل Flexbox ، ترجع إلى ما يصلح للأنماط التي تحاول بناءها وكيف تريد أنت وفريقك العمل.

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

في هذه المقالة ، سأحاول تغطية بعض الأشياء التي يمكن وصفها بأنها أفضل الممارسات ، وبعض الأشياء التي ربما لا داعي للقلق بشأنها.

المسح

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

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

إمكانية الوصول

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

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

- مواصفات الشبكة: إعادة الطلب وإمكانية الوصول

هذا ليس فريدًا بالنسبة لـ Grid ، ومع ذلك ، فإن القدرة على إعادة ترتيب المحتوى بسهولة في بعدين تجعلها مشكلة أكبر للشبكة. ومع ذلك ، إذا كنت تستخدم أي طريقة تسمح بإعادة ترتيب المحتوى - سواء كانت تلك الشبكة أو Flexbox أو حتى تحديد الموضع المطلق - فأنت بحاجة إلى الحرص على عدم فصل التجربة المرئية عن كيفية تنظيم المحتوى في المستند. ستتبع برامج قراءة الشاشة (والأشخاص الذين يتنقلون حول المستند باستخدام لوحة المفاتيح فقط) ترتيب العناصر في المصدر.

الأماكن التي تحتاج إلى توخي الحذر بشكل خاص هي عند استخدام flex-direction لعكس الترتيب في Flexbox ؛ خاصية order في Flexbox أو Grid ؛ أي موضع لعناصر الشبكة باستخدام أي طريقة ، إذا نقل العناصر خارج الترتيب المنطقي في المستند ؛ واستخدام وضع التعبئة الكثيفة grid-auto-flow .

لمزيد من المعلومات حول هذه المشكلة ، راجع الموارد التالية:

• تخطيط الشبكة وإمكانية الوصول إليها - MDN
• قطع اتصال Flexbox والتنقل بلوحة المفاتيح

ما هي طرق تخطيط الشبكة التي يجب علي استخدامها؟

"مع وجود الكثير من الخيارات في الشبكة ، كان من الصعب التمسك بطريقة متسقة لكتابتها (على سبيل المثال ، تسمية خطوط الشبكة أم لا ، وتحديد مناطق قالب الشبكة ، والاحتياطات ، واستعلامات الوسائط) بحيث يمكن صيانتها من قبل الجميع فريق."

- ميشيل باركر

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

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

هل يجب علي استخدام شبكة ضمنية أو صريحة؟

تُعرف الشبكة التي تحددها grid-template-columns grid-template-rows باسم الشبكة الصريحة. تتيح الشبكة الصريحة تسمية الخطوط على الشبكة وتمنحك أيضًا القدرة على استهداف خط نهاية الشبكة بـ -1 . ستختار Explicit Grid للقيام بأي من هذه الأشياء وبشكل عام عندما يكون لديك تخطيط مصمم بالكامل وتعرف بالضبط أين يجب أن تذهب خطوط الشبكة وحجم المسارات.

أستخدم الشبكة الضمنية في أغلب الأحيان لمسارات الصفوف. أريد تحديد الأعمدة ولكن بعد ذلك سيتم ضبط حجم الصفوف تلقائيًا وتنمو لاحتواء المحتوى. يمكنك التحكم في الشبكة الضمنية إلى حد ما باستخدام grid-auto-columns grid-auto-rows ، ومع ذلك ، يكون لديك تحكم أقل مما لو كنت تحدد كل شيء.

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

ومع ذلك ، من الممكن الجمع بين الاثنين. في CSS أدناه ، قمت بتحديد ثلاثة أعمدة في Explicit Grid وثلاثة صفوف ، لذلك ستكون الصفوف الثلاثة الأولى من المحتوى كما يلي:

• مسار لا يقل ارتفاعه عن 200 بكسل ، ولكنه يتوسع ليصبح المحتوى أطول ،
• مسار ثابت على ارتفاع 400 بكسل ،
• مسار لا يقل ارتفاعه عن 300 بكسل (لكنه يتسع).

سينتقل أي محتوى إضافي إلى صف تم إنشاؤه في الشبكة الضمنية ، وأنا أستخدم خاصية grid-auto-rows لجعل تلك المسارات بطول 300 بكسل على الأقل ، والتوسع إلى auto .

 .grid { display: grid; grid-template-columns: 1fr 3fr 1fr; grid-template-rows: minmax(200px auto) 400px minmax(300px, auto); grid-auto-rows: minmax(300px, auto); grid-gap: 20px; }

شبكة مرنة بعدد أعمدة مرن

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

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

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

ما هي طريقة قياس المسار التي يجب علي استخدامها؟

لقد وصفت حجم المسار بالتفصيل في مقالتي "ما حجم هذا الصندوق؟ فهم "التحجيم في تخطيط الشبكة" ، "ومع ذلك ، غالبًا ما أتلقى أسئلة حول طريقة استخدام حجم المسار. على وجه الخصوص ، يتم سؤالي عن الفرق بين الحجم المئوي ووحدة fr .

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

 .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; } 

لجعل وحدة fr توزع كل المساحة في حاوية الشبكة ، يجب أن تعطيها حجمًا أدنى من 0 باستخدام minmax() .

 .grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); grid-gap: 20px; }

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

وضع العناصر تلقائيًا أو تحديد مواقعها؟

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

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

ما هي طريقة تحديد المواقع التي يجب استخدامها؟

عند العمل باستخدام Grid Layout ، ينتهي كل شيء في النهاية إلى وضع العناصر من سطر إلى آخر. كل شيء آخر هو في الأساس مساعد لذلك.

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

الشبكة مع آليات التخطيط الأخرى

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

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

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

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

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

تعشيش الشبكة والعناصر المرنة

يأتي هذا أيضًا كثيرًا ، ولا توجد مشكلة على الإطلاق في جعل عنصر الشبكة أيضًا حاوية شبكة ، وبالتالي تداخل شبكة داخل أخرى. يمكنك أن تفعل الشيء نفسه مع Flexbox ، مما يجعل Flex Item و Flex Container. يمكنك أيضًا إنشاء عنصر شبكة وحاوية مرنة أو عنصر فليكس على شكل حاوية شبكة - لا يمثل أي من هذه الأشياء مشكلة!

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

يمكن أن يكون لديك العديد من الشبكات في صفحة واحدة

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

الإجراءات الاحتياطية ودعم المتصفحات القديمة

"لقد مكنتنا الشبكة المستخدمة جنبًا إلى جنب معsupports من التحكم بشكل أفضل في عدد أشكال التنسيق التي يمكن أن نتوقع رؤيتها. لقد نجح أيضًا في اتباع نهج التحسين التدريجي الخاص بنا مما يعني أنه يمكننا مكافأة أولئك الذين لديهم متصفحات حديثة دون منع الوصول إلى المحتوى لمن لا يستخدمون أحدث التقنيات ".

- جو لامبرت يعمل على rareloop.com

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

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

لدينا بالطبع مواقف لم يشحن فيها أحد المستعرضات دعمًا لمواصفات معينة ، أو بعض أجزاء من المواصفات. مع Grid ، كنا محظوظين جدًا لأن المتصفحات تشحن Grid Layout بطريقة كاملة جدًا وقابلة للتشغيل المتبادل في غضون فترة زمنية قصيرة من بعضها البعض. لذلك ، تميل اعتباراتنا للاختبار إلى الحاجة إلى اختبار المتصفحات باستخدام الشبكة وبدون الشبكة. ربما تكون قد اخترت أيضًا استخدام الإصدار -ms في IE10 و IE11 ، والذي سيتطلب بعد ذلك الاختبار كنوع ثالث من المستعرضات.

المتصفحات التي تدعم تخطيط الشبكة الحديث (وليس إصدار IE) تدعم أيضًا استعلامات الميزات. هذا يعني أنه يمكنك اختبار دعم الشبكة قبل استخدامه.

اختبار المتصفحات التي لا تدعم الشبكة

عند استخدام النسخ الاحتياطية للمتصفحات بدون دعم تخطيط الشبكة (أو استخدام الإصدار -ms لـ IE10 و 11) ، سوف ترغب في اختبار كيفية عرض هذه المتصفحات لـ Grid Layout. للقيام بذلك ، تحتاج إلى طريقة لعرض موقعك في متصفح كمثال.

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

هناك طريقتان مباشرتان لإعداد نفسك بطريقة مناسبة لاختبار احتياطاتك. أسهل طريقة - إذا كان لديك اتصال إنترنت سريع بشكل معقول ولا تمانع في دفع رسوم الاشتراك - هي استخدام خدمة مثل BrowserStack. هذه خدمة تتيح عرض مواقع الويب (حتى تلك التي ما زالت قيد التطوير على جهاز الكمبيوتر الخاص بك) على مجموعة كاملة من المتصفحات الحقيقية. يقدم BrowserStack حسابات مجانية لمشاريع مفتوحة المصدر.

للاختبار محليًا ، سيكون اقتراحي هو استخدام جهاز ظاهري مع تثبيت متصفحك المستهدف. تقدم Microsoft تنزيلات Virtual Machine مجانية مع إصدارات IE التي تعود إلى IE8 ، وكذلك Edge. يمكنك أيضًا تثبيت إصدار أقدم من المتصفح على الجهاز الظاهري بدون دعم الشبكة على الإطلاق. على سبيل المثال عن طريق الحصول على نسخة من Firefox 51 أو أقل. بعد تثبيت Firefox المسن ، تأكد من إيقاف تشغيل التحديثات التلقائية كما هو موضح هنا وإلا فسيحدث نفسه بهدوء!

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

نسيان العادات القديمة

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

- Hidde تعمل على hiddedevries.nl/ar

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

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

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

- Trys Mudford يعمل على trysmudford.com

في الختام ، إليك قائمة قصيرة جدًا بأفضل الممارسات الحالية! إذا اكتشفت أشياء تعمل أو لا تعمل بشكل جيد في حالتك الخاصة ، فأضفها إلى التعليقات.

1. كن مدركًا تمامًا لإمكانية إعادة ترتيب المحتوى. تحقق من أنك لم تقم بفصل العرض المرئي عن ترتيب المستندات.
2. اختبر باستخدام متصفحات مستهدفة حقيقية مع جهاز ظاهري محلي أو بعيد.
3. لا تنس أن طرق التخطيط القديمة لا تزال صالحة ومفيدة. جرب طرقًا مختلفة لتحقيق الأنماط. لا تقلق بشأن الاضطرار إلى استخدام الشبكة.
4. اعلم أنه بصفتك مطورًا أماميًا متمرسًا ، فمن المحتمل أن يكون لديك مجموعة كاملة من المفاهيم المسبقة حول كيفية عمل التخطيط. حاول إعادة النظر في هذه الأساليب الجديدة بدلاً من إجبارها على العودة إلى الأنماط القديمة.
5. استمر في تجربة الأشياء. نحن جميعًا جديدون على هذا. اختبر عملك وشارك ما تكتشفه.