مولد نظام الشبكة في CSS
أنشئ شبكة أعمدة متجاوبة بنقاط توقف وأعمدة وفواصل وهوامش وعرض أقصى تحددها بنفسك. صدّر CSS أو أصنافا مساعدة أو إعدادات Tailwind.
جارٍ تحميل مولد نظام الشبكة في CSS…
ملفاتك لا تغادر جهازك أبدًا
طريقة استخدام مولد نظام الشبكة في CSS
- 1
افتح مولد نظام الشبكة في CSS في هذه الصفحة. تُحمَّل مباشرة في متصفحك.
- 2
أضف ملفك أو نصك أو القيم، واضبط الإعدادات.
- 3
انسخ النتيجة أو نزّلها. لا يُرفع أي شيء ولا يُخزَّن.
عن هذه الأداة
يمنح نظام الشبكة كل صفحة البنية الأساسية نفسها: عدد ثابت من الأعمدة، وفواصل متسقة، وعرض أقصى للمحتوى، يتكيف مع كل حجم شاشة. يتيح لك مولد نظام الشبكة هذا تحديد هذه البنية مرة واحدة وتصدير كود جاهز، ليعمل المصممون والمطورون على الشبكة نفسها.
طريقة إنشاء شبكة
- حدد العرض الأقصى للمحتوى بالبكسل.
- عدّل نقاط التوقف: لكل حجم شاشة اختر عدد الأعمدة والفاصل بينها والهامش الخارجي.
- تحقق من المعاينة المباشرة للأعمدة.
- اختر بادئة للأصناف إذا كنت ستصدّر أصنافا.
- انسخ الكود بصيغة CSS عادي أو أصناف مساعدة أو إعدادات Tailwind.
إعداد نموذجي
| الشاشة | الأعمدة | الفاصل |
|---|---|---|
| الهاتف | 4 | 16px |
| الجهاز اللوحي | 8 | 24px |
| سطح المكتب | 12 | من 24 إلى 32px |
تنتشر الشبكة ذات الاثني عشر عمودا لأنها تنقسم بالتساوي إلى أنصاف وأثلاث وأرباع وأسداس.
نصائح
- طابق ملف التصميم: استخدم الأعمدة والفواصل نفسها الموجودة في شبكة التخطيط في Figma.
- حدد طول السطر: عرض أقصى بين 1200 و1440px تقريبا يبقي النص مقروءا على الشاشات الكبيرة.
- استخدم مقياسا للمسافات: فواصل وهوامش من 8 أو 16 أو 24 أو 32px تجعل المسافات متسقة.
- دع المحتوى يحدد نقاط التوقف: أضف نقطة حيث يبدأ التخطيط بالانكسار، لا عند أحجام الأجهزة فقط.
نظام الشبكة مقابل CSS grid
نظام الشبكة عرف تصميمي، وCSS grid ميزة في المتصفح يمكنها تطبيقه. يستخدم الكود الناتج CSS حديثا ولا يحتاج إلى أي إطار عمل. للتخطيطات أحادية البعد داخل الشبكة استخدم مولد Flexbox، وحدد أحجام النص باستخدام مولد مقياس الخطوط.
الأسئلة الشائعة
كم عمودا يجب أن تحتوي الشبكة؟
اثنا عشر عمودا على سطح المكتب هو الخيار الأشيع لأنها تنقسم إلى أنصاف وأثلاث وأرباع. تستخدم الهواتف عادة 4 أعمدة والأجهزة اللوحية 8.
ما الفاصل (gutter)؟
المسافة بين الأعمدة. الفواصل المعتادة 16px على الهاتف ومن 24 إلى 32px على الشاشات الأكبر.
هل يمكنني تصدير الشبكة لـ Tailwind؟
نعم. اختر صيغة Tailwind لتحصل على إعدادات لشاشاتك ومسافاتك.
هل يمكنني تحديد نقاط توقف خاصة بي؟
نعم. عدّل عرض كل نقطة توقف وأعمدتها وفاصلها وهامشها.
ما العرض الأقصى الذي أستخدمه؟
بين 1200 و1440 بكسل تقريبا يناسب معظم المواقع، ويبقي أسطر النص بطول مريح على الشاشات العريضة.
هل يحتاج الكود إلى Bootstrap أو إطار عمل آخر؟
لا. الكود والأصناف الناتجة CSS خالص يعمل بمفرده.