ساحة اختبار CSS Flexbox و Grid

ما هي ساحة اختبار CSS Flexbox و Grid؟

ساحة اختبار CSS Flexbox و Grid هي بيئة مرئية مجانية لتعلّم نموذجي التخطيط الرئيسيين في CSS وإنشاء نماذج أولية لهما، مُصممة لمطوّري الواجهات الأمامية والطلاب والمصممين. اختر Flex أو Grid، واضبط خصائص الحاوية، وافتح الإعدادات لتنسيق العناصر الأبناء بشكل فردي: order و flex-grow و flex-shrink و flex-basis و align-self في وضع Flex، أو امتداد العمود/الصف و align-self في وضع Grid. يوفّر وضع Grid أيضًا أحجام مسارات مخصصة — اكتب أي قيمة لـ grid-template-columns/rows مثل 200px 1fr أو repeat(auto-fit, minmax(120px, 1fr)) — ومحرر grid-template-areas مرئيًا تسمّي فيه كل خلية، وهو ما يُنشئ أيضًا خطوط شبكة مسمّاة. تعكس معاينة حيّة لمربعات مرقّمة كل تغيير، ويمكنك تصدير قاعدة .container وحدها أو الحاوية مع CSS كل عنصر.

كيفية استخدام ساحة اختبار CSS Flexbox و Grid

1. اختر Flex أو Grid بواسطة مبدّل الوضع لتحديد نموذج التخطيط الذي ستبنيه.
2. اضبط خصائص الحاوية — flex-direction/wrap و justify/align، أو عدد الأعمدة والصفوف مع justify-items/align-items.
3. افتح الإعدادات لتغيير الـ gap وعدد العناصر ولتنسيق كل عنصر ابن (order و flex-grow/shrink/basis و align-self أو امتداد العمود/الصف).
4. في Grid بدّل حجم المسارات إلى مخصص لكتابة grid-template-columns/rows الخاصة بك — px و fr و minmax() أو repeat(auto-fit/auto-fill, …).
5. شغّل محرر grid-template-areas وسمِّ كل خلية لوضع العناصر حسب المنطقة.
6. اختر تصدير CSS الحاوية وحدها أو الحاوية مع CSS كل عنصر، ثم انسخ النتيجة.

أمثلة

Flex · direction row · justify-content center · align-items center · gap 12

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

Grid · custom columns: repeat(auto-fit, minmax(120px, 1fr)) · gap 16

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  grid-template-rows: repeat(2, 1fr);
  justify-items: start;
  align-items: stretch;
  gap: 16px;
}

Grid · areas: header row, sidebar + main, footer row

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  justify-items: start;
  align-items: stretch;
  gap: 16px;
}

Flex · export container + items · item 2 flex-grow 1

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}

.container > :nth-child(2) {
  flex-grow: 1;
}

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

ما الفرق بين Flexbox و Grid هنا؟

يرتّب وضع Flex العناصر على طول محور واحد ويتيح flex-direction و flex-wrap و justify-content و align-items. أما وضع Grid فيرتّبها في بُعدين باستخدام grid-template-columns و grid-template-rows مع justify-items و align-items. بدّل الوضع لمقارنة كيف يعالج كل نموذج المحاذاة نفسها.

كيف أنسّق العناصر الفردية؟

افتح الإعدادات واستخدم عناصر التحكم لكل عنصر لضبط order و flex-grow و flex-shrink و flex-basis و align-self (Flex) أو امتداد العمود/الصف و align-self (Grid) لكل ابن. اضبط التصدير على 'الحاوية + العناصر' فتضيف الأداة قاعدة .container > :nth-child(n) لكل عنصر تخصّصه.

هل يمكنني استخدام أحجام مسارات مخصصة مثل auto-fit أو minmax()؟

نعم. في وضع Grid بدّل حجم المسارات إلى مخصص واكتب أي قيمة صالحة لـ grid-template-columns/rows — بكسلات أو وحدات fr أو minmax() أو repeat(auto-fit/auto-fill, minmax(120px, 1fr)) للأعمدة المتجاوبة. تتحدّث المعاينة والـ CSS المُولّد أثناء الكتابة.

ماذا يفعل محرر grid-template-areas؟

شغّله في وضع Grid وسمِّ كل خلية في الشبكة؛ تُجمّع الأداة إعلان grid-template-areas وتتحوّل الخلايا الفارغة إلى نقطة. تسمية المناطق تُنشئ أيضًا خطوط شبكة مسمّاة، ويمكنك وضع ابن في منطقة بكتابة اسمها في حقل grid-area لذلك العنصر.

هل تُرفع بياناتي إلى أي مكان؟

لا. تعمل الساحة بالكامل داخل متصفحك باستخدام JavaScript، لذا لا تُرسل إعداداتك والـ CSS المُولّد أبدًا إلى خادم. تعمل بخصوصية وحتى دون اتصال بعد تحميل الصفحة.