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

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

ساحة اختبار CSS Flexbox و Grid هي بيئة مرئية مجانية لتعلّم نموذجي التخطيط الرئيسيين في CSS وإنشاء نماذج أولية لهما، مُصممة لمطوّري الواجهات الأمامية والطلاب والمصممين. اختر Flex أو Grid بواسطة مبدّل الوضع، ثم اضبط خصائص الحاوية بقوائم منسدلة بسيطة وحقول رقمية: في وضع Flex تتحكّم في flex-direction و flex-wrap و justify-content و align-items؛ وفي وضع Grid تحدّد عدد الأعمدة والصفوف (تُعرض كـ repeat(n, 1fr)) إلى جانب justify-items و align-items. تنطبق قيمة gap وعدد العناصر على الوضعين. تُظهر معاينة حيّة لمربعات مرقّمة تمامًا كيف تتصرف محاذاتك وتباعدك، وتُولّد قاعدة .container CSS الكاملة لتنسخها. الجأ إليها كلما أردت رؤية كيف يبدو إعداد flex أو grid فعليًا قبل لصقه في مشروعك.

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

1. اختر Flex أو Grid بواسطة مبدّل الوضع لتحديد نموذج التخطيط الذي ستبنيه.
2. في وضع Flex، اضبط flex-direction و flex-wrap و justify-content و align-items من القوائم المنسدلة.
3. في وضع Grid، اضبط عدد الأعمدة والصفوف، إلى جانب justify-items و align-items.
4. افتح الإعدادات لتغيير الـ gap (التباعد بالبكسل) وعدد العناصر المعروضة في المعاينة.
5. شاهد معاينة المربعات الحيّة تُعاد ترتيبها كلما غيّرت خاصية.
6. انسخ قاعدة .container 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 · columns 3 · rows 2 · justify-items start · align-items stretch · gap 16

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

Flex · direction column · justify-content space-between · align-items stretch · gap 8

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 8px;
}

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

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

يرتّب وضع Flex العناصر على طول محور واحد ويتيح flex-direction و flex-wrap و justify-content و align-items. أما وضع Grid فيرتّب العناصر في شبكة ثنائية الأبعاد باستخدام grid-template-columns و grid-template-rows (تُكتب كـ repeat(n, 1fr)) مع justify-items و align-items. بدّل الوضع بالمبدّل لمقارنة كيف يعالج كل نموذج المحاذاة نفسها.

ماذا تفعل قيمة gap؟

تحدّد gap المسافة، بالبكسل، بين كل عنصر وآخر في تخطيطات Flex و Grid عبر خاصية CSS gap. زدها لإبعاد المربعات أو اجعلها 0 لتخطيط متلاصق؛ تتحدّث المعاينة والـ CSS المُولّد فورًا.

لماذا تُكتب justify-content و align-items بشكل مختلف في Grid؟

يستخدم Grid الكلمات المفتاحية start و end و center و stretch لـ justify-items و align-items، بينما يستخدم Flex القيمتين flex-start و flex-end. تُخرج الأداة الكلمات المفتاحية الصحيحة حسب الوضع الذي أنت فيه، لذا يظل الـ CSS المنسوخ صالحًا دائمًا.

هل يمكنني تغيير عدد العناصر المعروضة؟

نعم. افتح الإعدادات وغيّر عدد العناصر لإضافة أو إزالة مربعات المعاينة المرقّمة (حتى 24). يؤثر هذا فقط على العرض على الشاشة؛ أما الـ CSS المُولّد فيصف الحاوية، وليس العناصر نفسها.

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

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