مولّد شبكة CSS
حدد الأعمدة والصفوف، واسحب عبر الخلايا لوضع العناصر، ثم انسخ CSS للشبكة مع HTML المطابق بنقرة واحدة.
تم إنشاء شبكتك مباشرة في متصفحك. لا يتم تحميل أي شيء قمت بتعيينه هنا على BroBroGo.
الأسئلة الشائعة
كيف أضع العناصر على الشبكة؟
اضغط واسحب عبر الخلايا لتحديد مستطيل — وعندما تتركه، يصبح عنصرًا فرعيًا موضوعًا يمتد عبر تلك الأعمدة والصفوف. يحصل كل عنصر ترسمه على قاعدتي grid-column وgrid-row في CSS وعنصر div مطابق في HTML. قد تتداخل العناصر، ويظهر العنصر المرسوم لاحقًا في الأعلى؛ استخدم × على أي عنصر لإزالته.
هل يمكن أن تكون الأعمدة والصفوف بأحجام مختلفة؟
نعم. لكل مسار حقل حجم مستقل يمكنك أن تكتب فيه أي قيمة للشبكة، مثل 1fr أو 200px أو auto أو min-content أو minmax(120px, 1fr). تُجمع المسارات المتساوية في repeat() ليظل الناتج مختصرًا. ويمكن ضبط فجوتي الأعمدة والصفوف كلٌّ على حدة، وتُختصران إلى قيمة gap واحدة عندما تتساويان.
ماذا أفعل بالكود الذي تم إنشاؤه؟
انسخ CSS وHTML جنبًا إلى جنب. يمنحك HTML الحاوية التي تحتوي على div واحد لكل عنصر، ويحدد CSS الشبكة ويضع كل عنصر. الصقهما في مشروعك وستحصل على نفس التخطيط الذي رسمته هنا.