أنظمة الشبكة: دليل المصمم

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

أثبتت المدرسة السويسرية ذلك في الطباعة قبل ستين عامًا. مولر-براكمان وهوفمان وروودر، جيل كامل من المصممين عاملوا الشبكة كأداة تفكير لا كاختصار في التخطيط. وقد شاخ هذا الدرس أفضل من أي نظرية تصميم أخرى تقريبًا. كل شبكة منتج حديثة، من Linear إلى Stripe إلى New York Times، تنحدر من الفكرة نفسها. هذا هو المرجع العملي للشبكة في 2026.

مولر-براكمان منح الشبكة الحديثة قواعدها اللغوية

كتاب جوزيف مولر-براكمان الصادر عام 1981 "Grid Systems in Graphic Design" ما زال عمود هذا المجال الفقري. قبل ذلك الكتاب كانت الشبكات موجودة لكن المفردات لم تكن. وبعده صار للمصممين لغة مشتركة للأعمدة والمسافات البينية والهوامش والوحدات انتقلت عبر الاستوديوهات والمدارس والعقود.

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

طباعة قوية على شبكة ثابتة. فراغ بوصفه عنصرًا بنيويًا لا مساحة متبقية. المنطق نفسه يظهر اليوم في مقالات مثل لماذا يبدو كل SaaS متشابهًا في 2026، حيث التجانس هو انتصار الشبكة، ثم فقدانها لحدّتها.

ورثت الويب هذه القواعد ببطء. أعطتنا CSS الـ floats، ثم Flexbox، ثم أخيرًا CSS Grid. كل خطوة ضيّقت الفجوة بين ما كان يفعله مصممو الطباعة في 1961 وما يستطيع مطورو الواجهات فعله في المتصفح.

المفردات لم تتغير. الأعمدة ما زالت أعمدة. الأدوات فقط لحقت بالركب.

لماذا تنجح الشبكات، في فقرة واحدة

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

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

يصرف المصمم انتباهه على التراتبية والمحتوى بدل إعادة قياس كل كتلة. ويصرف المستخدم انتباهه على الرسالة بدل فك البنية. هذه هي الصفقة كلها.

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

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

هذا الجدول هو العلامة المرجعية. معظم الخلافات حول التخطيط تنتهي لحظة اتفاق الفريق على أي من هذه الأنواع الخمسة يعمل به.

الشبكة العمودية هي حصان العمل

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

تشغّل Stripe شبكة من 12 عمودًا عبر كامل واجهتها التسويقية. هيكل تطبيق Linear مبني على شبكة أعمدة تنكمش إلى مسار واحد على الجوال وتتمدد إلى شريط جانبي وعمود رئيسي على سطح المكتب. صفحات Vercel التسويقية تستخدم شبكة من 12 عمودًا مع مساحة سلبية مقصودة، والأعمدة مرئية إن أمعنت النظر في مصفوفة الأسعار أو تخطيط سجل النشر. الشبكة نفسها التي أدارت الملصقات في 1961 تدير مواقع التسويق في 2026، لكن مع media queries تحتها.

تخطَّ الشبكة العمودية فقط حين يكون التخطيط غير مستطيل في جوهره، وهو ما يكاد لا يحدث على الويب. يغطي تحليل حزمة موقع التسويق 2026 خيارات الأطر التي تقوم فوق هذه الشبكة.

الشبكة المعيارية للكثافة التحريرية

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

الصفحة الرئيسية لـ New York Times هي الشبكة المعيارية المرجعية على الويب. العناوين والصور والملخصات والإعلانات كلها تجلس في خلايا بعروض وارتفاعات متسقة، رغم أن التركيبة المرئية تبدو متنوعة. يدفع Bloomberg Terminal الشبكة المعيارية إلى أقصاها، بكثافة معلومات كانت ستنهار لولا انضباط صارم في الخلايا. وتقدم عرض المعرض في Notion شبكة معيارية أنعم، ببطاقات تلتصق بعرض خلية ثابت بينما يتكيف المحتوى في داخلها.

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

شبكة الخط الأساسي هي محرك الإيقاع

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

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

حساب الويب بسيط. اختر وحدة أساس، عادة 8 بكسل. اضبط line-height للنص على مضاعف، عادة 24 بكسل وهو 1.5 من نص بحجم 16 بكسل.

العناوين تقع على مضاعفات أيضًا، فعنوان H1 بحجم 48 بكسل وline-height بقيمة 56 بكسل يبقى ملتصقًا بالإيقاع نفسه. الصفحة كلها تدندن على نبضة واحدة.

الشبكة الهرمية لترتيب القراءة

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

صفحات إطلاق منتجات Apple شبكات هرمية على أرض الواقع. عنصر hero ينال مساحة غير متناسبة، والمحتوى الثانوي يجلس في تجمعات متراصة، والمحتوى الثالث يعيش في عمود أضيق قرب النهاية. وتقارير New York Times الكبرى، القطع المتعددة الوسائط ذات التمرير الطويل، شبكات هرمية مصممة مشهدًا بمشهد. والصفحة الرئيسية لـ Anthropic تشغّل شبكة هرمية يهيمن فيها بيان واحد ويُضبط كل ما عداه حجمًا للدعم.

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

إن كانت تراتبيتك خاطئة فالشبكة خاطئة. المنطق الأعمق للأولويات موجود في تصميم التراتبية البصرية.

شبكة المخطوطة للنصوص الطويلة

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

كتب Stripe Press شبكات مخطوطة على الورق. وصفحات وثائق Notion شبكات مخطوطة في المتصفح. وعرض القارئ في Substack، والمقالات الطويلة في Apple Newsroom، ومقالات New York Times Magazine بوضع العمود الواحد، كلها تشغّل الشبكة نفسها. الكتاب يعرف كيف يقدم القراءة الطويلة منذ خمسة قرون. ولحقت بها الويب لحظة توقفنا عن محاولة وضع شريط جانبي بجوار مقال من 4000 كلمة.

القيد هو القياس، أي طول السطر. استهدف من 65 إلى 75 حرفًا. أعرض من ذلك وتفقد العين السطر عند العودة. وأضيق وصار الإيقاع متقطعًا.

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

نظام الأعمدة الاثني عشر يدير الويب الحديث

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

قنّن Bootstrap شبكة الـ12 عمودًا للويب في 2011 ولم يضطر يومًا إلى الاعتذار عن الاختيار. وأدوات الشبكة في Tailwind تأتي بـ12 عمودًا افتراضيًا. والشبكة المتجاوبة في Material Design، وشبكة Carbon Design، وPolaris من Shopify، كلها من 12 عمودًا. الاختيار ليس صدفة، إنه الحساب.

إليك دليل الأعمدة الاثني عشر الذي تستخدمه معظم الفرق أو تعيد اختراعه بشكل سيئ:

• 12 hero بعرض كامل، لافتة، تذييل، محتوى من الحافة إلى الحافة
• 8 + 4 محتوى رئيسي مع شريط جانبي، هيكل تطبيق المنتج المرجعي
• 6 + 6 كتل محتوى ثنائية، صفوف الميزات التسويقية، أقسام المقارنة
• 4 + 4 + 4 بطاقات ثلاثية، باقات الأسعار، شبكات ميزات بثلاثة أعمدة
• 3 + 3 + 3 + 3 شعارات رباعية، شبكات الفريق، معارض الصور
• 9 + 3 محتوى مع عمود بيانات وصفية رفيع، شائع في التخطيطات التحريرية
• 2 + 8 + 2 محتوى متوسط مع مساحة للتنفس، يُستخدم في صفحات التفاصيل التسويقية

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

إيقاع الخط الأساسي على الشاشات، لا على الورق فقط

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

الحيلة أن تفكر بوحدات رأسية لا ببكسلات. اختر أساسًا من 8 بكسل. كل padding وmargin وline-height وارتفاع مكوّن يصبح مضاعفًا لـ8.

النص الأساسي بحجم 16 بكسل وline-height بقيمة 24 بكسل ينسجم مع الإيقاع. H1 بحجم 48 وline-height بقيمة 56 ينسجم. padding البطاقة بقيمة 24 ينسجم. تباعد الأقسام بقيمة 96 ينسجم. تصبح الصفحة كلها آلة واحدة مضبوطة على نغمة واحدة، وتتحرك العين عبرها دون عثرة واحدة.

تعتمد Linear إيقاع الخط الأساسي في قائمة المشكلات. وتعتمده Notion في قارئ الوثائق. ويحافظ منتج Slides من Figma على الإيقاع عبر مصغرات الشرائح ولوحة المحرر معًا. الفرق التي تحافظ على الإيقاع هي غالبًا الفرق التي تعامل الطباعة كنظام لا كتجاوز في ورقة أنماط.

الشبكات المتجاوبة دون ذعر

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

النهج المعتاد هو شبكة 12 عمودًا على سطح المكتب، و8 أعمدة على التابلت، و4 أعمدة على الجوال. تخطيط 4 + 8 على سطح المكتب يصبح 4 + 4 على التابلت وعمودًا واحدًا على الجوال. وتخطيط رباعي 3 + 3 + 3 + 3 يصبح 4 + 4 (صفان من اثنين) على التابلت و4 + 4 + 4 + 4 (أربعة متراصة) على الجوال. الحساب متسق لأن عدد الأعمدة يتناقص بكسور نظيفة.

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

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

عصر CSS Grid: وصلت الأدوات بجودة الطباعة أخيرًا

CSS Grid هي المرة الأولى التي يمتلك فيها المتصفح عنصر تخطيط أساسيًا يطابق ما كان يفعله مصممو الطباعة في 1961. قبل CSS Grid كان لدى مصممي الويب floats وFlexbox وكثير من الصبر. الآن لدينا خطوط شبكة فعلية، ومناطق مسماة، وتحكم في المسافات، والقدرة على تخطيط صفحة كما كان مولر-براكمان سيخطط ملصقًا.

التحول مهم لأن ما كان قرارًا وقت البناء (أي شبكة إطار عمل أستخدم) صار عنصر تخطيط مدمجًا في المتصفح. display: grid مع grid-template-columns: repeat(12, 1fr) مع gap: 24px هو شبكة 12 عمودًا. لا حاجة لإطار عمل. لا فئات أدوات. فقط CSS تفعل ما كان ينبغي أن تفعله قبل عقد.

أدوات الشبكة في Tailwind هي الآن سكر رقيق فوق CSS Grid. وشبكة Bootstrap في معظمها طبقة توافق لمشكلة لم تعد موجودة. الفرق التي تستفيد أكثر من CSS Grid تعاملها كأداة تصميم لا كبديل احتياطي لـ Flexbox.

محرر Linear يستخدم CSS Grid لتخطيط لوحة المشكلات. ومحرر Figma على الويب يستخدمها لإطار اللوحة. وVercel تستخدمها عبر معظم الموقع التسويقي. الأداة في الحقيبة، والسؤال هو هل يستخدمها نظام التصميم أم يشغّل أنماط 2018 على بنية 2026 التحتية.

شبكات منتجات حقيقية تستحق الدراسة

أسرع طريقة لاستيعاب أنظمة الشبكة هي فحص المنتجات التي تشحنها بإتقان. خمسة تستحق نظرة طويلة.

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

Vercel تشغّل شبكة 12 عمودًا مع مساحة سلبية مقصودة. الصفحات التسويقية تتنفس، ولوحة التحكم تشغّل شبكة معيارية أكثر كثافة، وعرض النشر، الذي نتناوله في شاشة التحميل هي المنتج، يشغّل شبكة هرمية يهيمن فيها سجل البناء ويفسح كل شيء آخر المجال له.

Stripe هي شبكة الـ12 عمودًا المرجعية في الواجهة التسويقية وشبكة معيارية في لوحة التحكم. بطاقات اللوحة تلتصق بعروض متسقة، وكتل المقاييس تتشارك الارتفاعات، والمنتج كله يُقرأ كتركيبة واحدة عبر أكثر من ثلاثين شاشة. ويغطي تحليل اللوحة المضادة الفلسفة التي تطبّقها تلك الشبكة.

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

الشبكات التحريرية: NYT وFigma وAnthropic

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

Figma تشغّل شبكة أعمدة في متصفح الملفات، وشبكة معيارية في مكتبة الفريق، وشبكة مخصصة داخل اللوحة نفسها. وتقدم Notion شبكة مخطوطة للوثائق وشبكة معيارية لقواعد البيانات. أما Loops وResend، وهما منتجان أحدث، فتقدمان شبكات تسويقية نظيفة من 12 عمودًا وشبكات أعمدة أكثر إحكامًا داخل التطبيق. وموقع Anthropic يشغّل شبكة هرمية يهيمن فيها بيان واحد على كل قسم، متأثرة بالتخطيطات التحريرية أكثر من واجهات المنتجات. ويوضح مقال الـ onboarding بلا onboarding كيف ينتقل انضباط الشبكة إلى تدفقات التشغيل الأول التي كثيرًا ما تُعامل كتخطيطات لمرة واحدة.

متى تكسر الشبكة (عن قصد)

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

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

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

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

الشبكة هي العلامة، حتى حين لا يشير إليها أحد

لو جرّدت الألوان والطباعة والصور من أي منتج ذُكر في هذا المقال، لظلت الشبكات معروفة. شبكة Linear ستظل تشبه Linear. وشبكة Stripe ستظل تشبه Stripe. الشبكة هي أعمق قطعة علامة يشحنها المنتج، لأنها التي يشعر بها المستخدم دون أن يراها بوعي.

اختر نوع شبكة، واختر عدد أعمدة، واختر وحدة خط أساسي. حافظ عليها عبر كل واجهة لمدة عام وستبدأ العلامة بالظهور من البنية لا من المعالجة السطحية. هذا هو السر كله الذي علّمته المدرسة السويسرية وتعيد معظم فرق المنتجات تعلمه. الشبكة تؤدي العمل. والباقي زينة تنجح أو تفشل بحسب وجود الشبكة لتحملها.

الأسئلة الشائعة

ما الفرق بين الشبكة العمودية والشبكة المعيارية؟

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

لماذا شبكة الـ12 عمودًا هي المعيار؟

12 هو أكثر الأعداد الصغيرة قابلية للقسمة. ينقسم بنظافة إلى 1 و2 و3 و4 و6 و12، وهذا يغطي تقريبًا كل نمط تخطيط (عرض كامل، أنصاف، أثلاث، أرباع، أسداس) دون كسور. قنّنه Bootstrap في 2011، وتعتمده Tailwind افتراضيًا، وكل نظام تصميم كبير منذ ذلك الحين طابق الاختيار لأن الحساب هو الحساب.

هل ما زلت أحتاج إطار CSS بعد وجود CSS Grid؟

للتخطيط، لا. display: grid مع grid-template-columns: repeat(12, 1fr) وgap هو شبكة 12 عمودًا في ثلاثة أسطر CSS. أطر مثل Bootstrap وTailwind تضيف قيمة عبر اصطلاحات المكونات واختصارات الأدوات والاتساق على مستوى الفريق، لكن عنصر التخطيط نفسه صار ميزة في المتصفح. استخدم الإطار إن كان يسرّع فريقك. لا تستخدمه لأنك تظن أنك تحتاجه للشبكات.

الأسئلة الشائعة: شحن الشبكة وكسرها

كيف أحافظ على إيقاع الخط الأساسي في منتج حقيقي؟

اختر وحدة أساس، عادة 8 بكسل. اجعل كل padding وmargin وline-height وأبعاد مكوّن مضاعفًا لتلك الوحدة. نص أساسي بحجم 16 بكسل وline-height بقيمة 24 بكسل.

عناوين بأحجام 32 أو 40 أو 48 أو 56 وline-height بقيم 40 أو 48 أو 56 أو 64. تباعد أقسام بقيمة 96 أو 128. الانضباط ممل، والنتيجة صفحة تُقرأ كمنتج مكتمل لا كمسودة.

متى يجب أن أكسر الشبكة؟

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

دعوة للعمل

إن كنت تريد فريقًا يصمم أنظمة الشبكة كعمود فقري للمنتج لا كفكرة متأخرة قبل الإطلاق، وظّف Brainy. نشحن منتجات تؤدي فيها الشبكة العمل، وتُقرأ العلامة بنظرة، ويثبت الإيقاع عبر كل واجهة. كان مولر-براكمان سيوافق. وسيوافق مستخدموك أيضًا، حتى لو لم يعرفوا قط أي شبكة ينظرون إليها.