أداة إنشاء تخطيطات CSS Grid
صمم تخطيطات CSS Grid باستخدام محرر مرئي. اضبط الأعمدة والصفوف باستخدام وحدات fr أو px أو auto، وقم بتكوين المسافات، وامتداد الخلايا، وتصدير كود CSS نظيف.
셀을 클릭하여 선택한 후 아래에서 span을 설정하세요.
ما هي أداة إنشاء CSS Grid؟
أداة إنشاء CSS Grid هي أداة مرئية لتصميم تخطيطات ثنائية الأبعاد باستخدام CSS Grid. يمكنك تحديد الأعمدة والصفوف والمسافات، ثم النقر فوق الخلايا لتعيين قيم الامتداد. تقوم الأداة بإنشاء كود CSS المقابل الذي يمكنك نسخه إلى مشروعك. إنها تلغي الحاجة إلى حفظ بناء جملة Grid أثناء تعلم أو تصميم التخطيطات.
كيفية إنشاء تخطيط CSS Grid
- حدد الأعمدة — أدخل تعريفات الأعمدة باستخدام fr أو px أو auto (على سبيل المثال،
1fr 1fr 1fr) - حدد الصفوف — أدخل تعريفات الصفوف بنفس الطريقة
- اضبط المسافات — اضبط قيم تباعد الأعمدة والصفوف بالبكسل
- انقر فوق تطبيق — يتم تحديث معاينة الشبكة لإظهار التخطيط الخاص بك
- امتداد الخلايا — انقر فوق أي خلية وقم بتعيين قيم امتداد العمود/الصف
- انسخ CSS — انقر فوق زر النسخ للحصول على الكود الذي تم إنشاؤه
لماذا تستخدم أداة إنشاء CSS Grid هذه؟
- ملاحظات مرئية — شاهد تحديث تخطيط الشبكة الخاص بك في الوقت الفعلي
- وحدات مرنة — استخدم fr أو px أو auto أو أي طول CSS صالح للأعمدة والصفوف
- امتداد الخلايا — انقر فوق الخلايا للامتداد عبر أعمدة أو صفوف متعددة
- كود CSS نظيف — يستخدم الكود الذي تم إنشاؤه خصائص Grid القياسية الجاهزة للإنتاج
- لا حاجة لحساب — مجاني ويعمل بالكامل في متصفحك
FreeToolbox مقابل أدوات إنشاء Grid الأخرى
| الميزة | FreeToolbox | CSS Grid Generator | Layoutit |
|---|---|---|---|
| امتداد الخلايا | نعم | نعم | نعم |
| وحدات مخصصة | fr, px, auto | fr, px | fr, px, % |
| معاينة مباشرة | نعم | نعم | نعم |
| إعلانات | أقل حد | لا يوجد | متوسطة |
| مظهر داكن | نعم | لا | لا |
الأسئلة الشائعة
ما هي الوحدات التي يمكنني استخدامها للأعمدة والصفوف؟
يمكنك استخدام أي قيمة مسار CSS grid صالحة: fr (وحدات كسرية)، px (بكسل)، auto، نسب مئوية، minmax()، إلخ. على سبيل المثال: 1fr 200px auto.
كيف يمكنني جعل الخلية تمتد على أعمدة متعددة؟
انقر فوق خلية في المعاينة لتحديدها، ثم قم بتعيين قيمة امتداد العمود في اللوحة أدناه. انقر فوق 'تعيين الامتداد' للتطبيق.
هل يمكنني إنشاء مناطق شبكة مسماة؟
تركز هذه الأداة على تعريف Grid المستند إلى المسار مع بناء جملة الامتداد. بالنسبة لمناطق grid-template-areas المسماة، ستحتاج إلى إضافتها يدويًا إلى كود CSS الذي تم إنشاؤه.
ماذا يحدث عندما تتداخل الامتدادات؟
تتعامل خوارزمية تحديد المواقع التلقائية للشبكة في المتصفح مع الامتدادات المتداخلة. قد تتحول بعض الخلايا إلى موضع آخر. أعد تعيين الامتدادات إذا كان التخطيط يبدو غير متوقع.
هل هذه الأداة مجانية؟
نعم، مجانية تمامًا بدون حدود أو تسجيل مطلوب.