أداة مجانية

CSS Layout Generator

قم بإنشاء كود تخطيط CSS Flexbox و Grid بصرياً مع معاينة مباشرة. انسخ CSS جاهز للاستخدام لمشروعك.

Controls
8px
معاينة
1
2
3
4
5
CSS المُنشأ
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 8px;
}

ما هذه الأداة؟

يتيح لك CSS Layout Generator تكوين خصائص Flexbox و CSS Grid بصرياً ورؤية النتيجة فوراً. اضبط عناصر التحكم و انسخ CSS المُنشأ مباشرة إلى مشروعك — بدون تخمين يدوي.

Flexbox مقابل CSS Grid

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

كيفية الاستخدام

  1. اختر علامة التبويب Flexbox أو Grid.
  2. اضبط عناصر التحكم — الاتجاه والالتفاف والمحاذاة والفجوات وقوالس الأعمدة والصفوف.
  3. تتحدث المعاينة بشكل مباشر حتى تتمكن من رؤية النتيجة فوراً.
  4. انقر على زر النسخ لنسخ قاعدة CSS الكاملة والصقها في ورقة الأنماط الخاصة بك.

جميع عمليات توليد التخطيط تتم في متصفحك — لا يتم إرسال أي بيانات إلى أي خادم.

الأسئلة الشائعة

ما هو Flexbox وفي أي الحالات يجب استخدامه؟
Flexbox هو نموذج تخطيط CSS يرتب العناصر على محور واحد (صف أو عمود). وهو مثالي لأشرطة التنقل وصفوف البطاقات وأي مهمة محاذاة أحادية البعد. استخدم خصائص flex-direction و justify-content و align-items للتحكم في المسافات والمحاذاة.
ما هو CSS Grid وفي أي الحالات يجب استخدامه؟
CSS Grid هو نظام تخطيط ثنائي الأبعاد يتيح لك تحديد الأعمدة والصفوف. وهو مثالي لتخطيطات الصفحة الكاملة والمعارض الصورية والوحدات التحكمية. استخدم grid-template-columns و grid-template-rows لتحديد البنية.
ما معنى grid-template-columns: repeat(3, 1fr)؟
هذا ينشئ ثلاثة أعمدة متساوية العرض. وحدة 1fr تعني حصة واحدة من المساحة المتاحة. يمكنك مزج القيم، على سبيل المثال '1fr 2fr 1fr' ينشئ عمود أوسط أعرض.
ما الفرق بين justify-content و align-items في Flexbox؟
يتحكم justify-content في المحاذاة على طول المحور الرئيسي (أفقي بشكل افتراضي)، بينما يتحكم align-items في المحاذاة على طول المحور المتقاطع (عمودي بشكل افتراضي). إذا كان flex-direction عمود، يتم تبديل المحاور.
هل CSS المُنشأ متوافق مع جميع المتصفحات؟
يدعم Flexbox و CSS Grid جميع المتصفحات الحديثة (Chrome و Firefox و Safari و Edge). بالنسبة للمتصفحات القديمة جداً قد تحتاج إلى بادئات البائع، لكن بالنسبة لمشاريع 2024 وما بعده يعمل CSS المُنشأ بدون أي تعديلات.

أدوات ذات صلة

CSS Gradient Generator

Build linear, radial, and conic CSS gradients visually — drag color stops, share via URL

CSS Formatter

Beautify or minify CSS stylesheets instantly

CSS Box Shadow

Build and preview CSS box-shadow values visually with multi-layer support