Softonic

مولّد CSS Grid

خطوة 1 / 3
التالي

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

كيف تبني شبكة

  1. 1

    حدد عدد الأعمدة

    بين 1 و12 مسارًا متساوي العرض.

  2. 2

    حدد أدنى عرض للعمود

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

  3. 3

    حدد المسافة

    الفراغ بين الأعمدة والصفوف.

  4. 4

    أنشئ CSS

    تكتب الأداة قواعد الحاوية والبديل المتجاوب معًا.

  5. 5

    انسخ الرمز

    الصق قواعد الحاوية في ورقة الأنماط ونسّب العناصر بقواعد `grid-column` / `grid-row` الخاصة بك.

الحاوية المُنشأة

display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;

@media (max-width: 660px) {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
  • repeat(3, minmax(0, 1fr)): ثلاثة أعمدة تتقاسم العرض المتاح بالتساوي. 1fr جزء من المساحة المتبقية؛ minmax(0, 1fr) يسمح للأعمدة بالانكماش تحت حجم محتواها.
  • gap: المسافة بين كل مسار.
  • يتحول استعلام الوسائط إلى repeat(auto-fit, minmax(220px, 1fr))، أي أكبر عدد ممكن من الأعمدة، كل منها بعرض 220px على الأقل. نقطة الفصل هي عدد الأعمدة مضروبًا في أدنى عرض (بحد أدنى 120px)، لذلك على الشاشات الصغيرة تنتقل الشبكة إلى صفوف جديدة بدلًا من الانضغاط.

وحدة fr

تعني fr “جزءًا من المساحة المتبقية”: بعد طرح المسارات ذات الحجم الثابت، تُقسم المساحة المتبقية على العدد الكلي لوحدات fr.

grid-template-columns: 200px 1fr 2fr;

على حاوية بعرض 1000px، يأخذ العمود الأول 200px، وتُقسم الـ800px المتبقية بنسبة 1:2، أي 267px و533px.

auto-fill مقابل auto-fit

  • auto-fill: ينشئ مسارات فارغة لسد الفراغ عندما لا تكون العناصر كافية.
  • auto-fit: يطوي المسارات الفارغة إلى الصفر، فتمتد العناصر المتبقية لملء الصف.

يستخدم البديل المتجاوب auto-fit، وهو ما تريده شبكات البطاقات: يبدو الصف ممتلئًا دائمًا.

أعمدة بعروض مختلفة

ينشئ المولّد أعمدة متساوية. عدّل الناتج لخلط الأحجام: grid-template-columns: 200px 1fr 2fr; يمنحك شريطًا جانبيًا ثابتًا وعمودين مرنين بنسبة 1:2. للمناطق المسماة (grid-template-areas) أو التنسيب الصريح (grid-column: 1 / 3)، أضف هذه القواعد يدويًا فوق الحاوية المُنشأة.

Grid مقابل Flexbox

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

تجمع التخطيطات الحقيقية عادةً بين الاثنين: Grid لهيكل الصفحة، وFlexbox داخل المكونات.

أخطاء شائعة

  • نسيان min-width: 0 على العناصر الفرعية: تستخدم عناصر الشبكة افتراضيًا أدنى عرض لمحتواها، ما يمنع أعمدة fr من الانكماش تحت أطول كلمة. ضع min-width: 0 على الفرعية لتسمح لها بالانكماش.
  • التداخل دون display: grid: العنصر الفرعي للشبكة ليس شبكة بحد ذاته ما لم تعلن ذلك.

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

يحمي التخطيط على الشاشات الصغيرة. يتحول استعلام الوسائط المُنشأ إلى repeat(auto-fit, minmax(العرض, 1fr))، لذلك يحتفظ كل عمود بهذا العرض على الأقل وتضيف الشبكة صفوفًا بدلًا من ضغط الأعمدة.

ينشئ المولّد أعمدة متساوية. عدّل سطر grid-template-columns في الناتج لخلط الأحجام، مثل 1fr 2fr 1fr لعمود أوسط عريض، أو 200px 1fr لشريط جانبي ثابت.

عادةً لأن العنصر يستخدم min-width: auto الافتراضي، وهو يساوي أدنى عرض لمحتواه. ضع min-width: 0 على عنصر الشبكة ليتمكن من الانكماش داخل خليته.

Grid عندما يكون للتخطيط بنية صفوف وأعمدة (تخطيط صفحة، معرض صور، لوحة تحكم). Flexbox عندما تتدفق العناصر على محور واحد (شريط تنقل، صف أزرار، كومة حقول نموذج).

أدوات ذات صلة

مرجع جدول ASCII

جدول ASCII كامل من 0 إلى 127 مع التمثيل العشري والست عشري والثماني والثنائي والمرجع الرقمي في HTML لكل محرف، بما في ذلك أكواد التحكم مثل NUL وLF وDEL.

مرجع أحرف HTML

قائمة قابلة للبحث بكيانات HTML، مع رموزها المسمّاة والرقمية، بالإضافة إلى خيار النسخ بنقرة واحدة للأحرف والرموز الخاصة.

أداة إزالة التشفير في لغة جافا سكريبت (JavaScript Deobfuscator)

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

مولد تراخيص

قم بإنشاء النص الكامل لترخيصات المصدر المفتوح مع إدخال اسمك والسنة المقابلة، ويشمل ذلك تراخيص MIT وApache 2.0 وGPLv3 وBSD-3 وMPL-2.0 وCC.

مولّد إعدادات Nginx

أنشئ كتل server في Nginx مع TLS وHTTP/2 وgzip والتخزين المؤقت في المتصفح وقواعد الوكيل العكسي، انطلاقًا من نموذج بسيط.

مولد ملف tsconfig.json

أنشئ ملف tsconfig.json نظيفا باختيار target وmodule وmoduleResolution وJSX وأعلام الصرامة الشائعة، ثم انسخ الإعداد المولّد إلى مشروعك.

الأداة متاحة بلغات أخرى