ToolsOnline

مولّد تخطيط CSS عبر الإنترنت

اضبط خصائص Flexbox / Grid بصريًا مع عرض حي وكود CSS جاهز


          

حول مولّد تخطيط CSS هذا

اختر Flexbox أو Grid على اليسار، ثم اضبط الاتجاه ومحاذاة المحور الرئيسي / المتقاطع والالتفاف وعدد الأعمدة وارتفاع الصفوف والفجوة عبر قوائم منسدلة ومدخلات رقمية. تعرض منطقة العرض على اليمين التخطيط لحظيًا ببضع مكعبات ملونة — ما تراه هو ما تحصل عليه.

يُولَّد تحته CSS التصريحي المطابق — خصائص Flex: display / flex-direction / justify-content / align-items / flex-wrap / gap، وخصائص Grid: display / grid-template-columns / grid-auto-rows / gap — جاهزًا للنسخ إلى مشروعك. كل شيء يعمل محليًا في متصفحك دون أي مكتبات خارجية.