حول هذه الأداة
مولّد شبكة CSS أداة مجانية تعمل داخل المتصفح، تحوّل ثلاثة عناصر تحكم بسيطة، هي عدد الأعمدة وعدد الصفوف والفجوة، إلى تخطيط شبكة CSS جاهز للصق. اضبط القيم، وشاهِد معاينة حيّة تُعاد رسمها، وانسخ القاعدة المولَّدة.
الأعمدة والصفوف أعداد صحيحة من 1 إلى 12 (افتراضياً 3 و2)، والفجوة شريط تمرير من 0 إلى 40 بكسل (افتراضياً 10). يُكتب البُعدان بـ repeat() ووحدة 1fr، فيتقاسم كل مسار المساحة المتاحة بالتساوي. تملأ المعاينة كل خلية بكتلة مرقّمة ملوّنة كي ترى بنية المسارات بلمحة، والمخرجات قاعدة .grid صرفة تستخدم display: grid، وgrid-template-columns، وgrid-template-rows، وgap. نقرة واحدة تنسخها إلى حافظتك.
كل شيء يعمل بالكامل في متصفحك، بلا رفع ولا حسابات ولا تتبّع، ويظل يعمل دون اتصال بعد تحميل الصفحة.
الأسئلة الشائعة
كيف تُحدَّد أبعاد المسارات؟
يُكتب كل من الأعمدة والصفوف بـ repeat() ووحدة 1fr، فتتقاسم كل المسارات المساحة المتاحة بالتساوي.
ماذا يفعل عنصر تحكم الفجوة؟
يضبط فجوة الشبكة بالبكسل بين كل خلية، من 0 إلى 40، ويُطبَّق مباشرة على كل من المعاينة وCSS المولَّد.
ما النطاقات التي تسمح بها عناصر التحكم؟
تقبل الأعمدة والصفوف أعداداً صحيحة من 1 إلى 12؛ ويمتد شريط الفجوة من 0 إلى 40 بكسل. وتُقيَّد المُدخلات خارج النطاق أو غير الرقمية، فتؤول إلى الإعدادات الافتراضية: 3 أعمدة و2 صف وفجوة 10px.
ما CSS الذي يُخرجه؟
قاعدة .grid تحوي display: grid، وgrid-template-columns وgrid-template-rows كلٌّ مضبوط بـ repeat() و1fr، والفجوة بالبكسل. وزر «نسخ» يضع تلك القاعدة بالضبط في حافظتك.