منشئ تخطيطات CSS Grid وFlexbox
صمّم تخطيطات Grid وFlexbox متجاوبة بمعاينة حية وشيفرة CSS جاهزة للنسخ.
مرّر المؤشر فوق حقل أو حدّده لعرض المساعدة. اضغط Escape للإغلاق.
طريقة الاستخدام
الصق المحتوى أو اعرض المثال. اختر الخيارات المتاحة وشغّل الأداة ثم انسخ النتيجة أو نزّلها.
مثال عملي
التخطيط
Layout
الأسئلة الشائعة
هل يُرسل النص إلى خادم؟
لا. تتم معالجة المحتوى في هذا المتصفح دون إرساله إلى الخادم أو حفظه.
ما الذي ينبغي معرفته عن منشئ تخطيطات CSS Grid وFlexbox؟
تستخدم المعاينة كتلًا مرقمة. تشمل CSS الناتجة قواعد التخطيط؛ عدّل المحددات ونقاط التوقف لصفحتك.