مولّد تخطيطات CSS Grid وFlexbox
مولّد تخطيطات CSS يتيح لك التبديل بين Grid وFlexbox، ضبط عدد الأعمدة والصفوف أو اتجاه ومحاذاة عناصر Flexbox والمسافة بينها، مع معاينة حية فورية لعناصر ملونة داخل الحاوية، ثم نسخ كود CSS الجاهز.
أدوات التصميم وCSS يعمل محليًا بالكامل
تتم كل المعالجة داخل جهازك ولا يُرسل أي شيء لأي خادم.
1
2
3
4
5
6
كود CSS
display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 12px;
ما الذي تفعله هذه الأداة
تولّد شيفرة تخطيط بـ Grid أو Flexbox بضبط الأعمدة والصفوف والفجوات والاتجاه والمحاذاة، مع معاينة حيّة.
متى تستخدمها
- تخطيط صفحة أو قسم تريد شيفرته جاهزة.
- تتعلّم الفرق بين Grid وFlexbox بتجربتهما.
- تضبط محاذاة عناصر ولا تتذكر اسم الخاصية المناسبة.
- تجرّب قيم المحاذاة لترى أثر كل منها.
طريقة الاستخدام
- اختر «Grid» أو «Flexbox».
- اضبط «الأعمدة» و«الصفوف» و«الفجوة» للشبكة، أو «الاتجاه» للفليكس.
- اضبط «محاذاة المحتوى» و«محاذاة العناصر».
- انسخ «شيفرة CSS».
مثال عملي
المُدخَل
Flexbox باتجاه صف مع توزيع متباعد ومحاذاة في الوسط.
الناتج
شيفرة تخطيط توزّع العناصر أفقيًا بمسافات متساوية بينها وتوسّطها رأسيًا.
حدود الأداة
- القاعدة العملية: Grid للتخطيطات ثنائية الأبعاد (صفوف وأعمدة معًا)، وFlexbox لمحور واحد — والأداة تولّد ما تختاره دون أن تنصحك أيّهما أنسب لحالتك.
- الشيفرة للحاوية؛ خصائص العناصر الداخلية تُضبط بشكل منفصل.
- المعاينة بعناصر افتراضية، وسلوك محتواك الحقيقي قد يختلف بحسب أحجامه.
الخصوصية والمعالجة
شيفرة التخطيط تُنتَج على جهازك ولا يُرسل شيء إلى خادم.
ملاحظات تقنية
- أسماء قيم المحاذاة معروضة بمعناها لا برمزها فقط، وهو ما يعالج أكثر ما يُنسى في هاتين الخاصيتين.
الأسئلة الشائعة
نعم، يمكنك التبديل بين وضع Grid ووضع Flexbox في أي وقت، وتُحدَّث المعاينة وكود CSS فورًا حسب الوضع المختار.