.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
gap: 16px;
}ما هو مولد شبكة CSS؟
يعد CSS Grid Generator أداة إنشاء مرئية لتخطيط شبكة CSS. يمكنك اختيار عدد الأعمدة والصفوف التي تريدها، واختيار حجم المسار لكل محور، وتعيين الفجوات والمحاذاة، وإعادة ترتيب شبكة المعاينة في الوقت الفعلي. يوجد CSS الدقيق الذي ينتج ما تراه في مربع جاهز للنسخ أسفله، لذلك لن تضطر أبدًا إلى كتابة أعمدة قالب الشبكة يدويًا أو حساب وحدات الكسور في رأسك.
شبكة CSS هي نموذج تخطيط ثنائي الأبعاد. على عكس flexbox، الذي يضع العناصر على طول محور واحد، تتحكم الشبكة في الصفوف والأعمدة في نفس الوقت. تحتفظ الحاوية بالهيكل من خلال مجموعة صغيرة من الخصائص: تحدد أعمدة قالب الشبكة وصفوف قالب الشبكة المسارات، وتضيف الفجوة تباعدًا بينها، وتبرر العناصر، وتحاذي العناصر، وتبرر المحتوى، وتوافق المحتوى العناصر والمسارات. تعرض هذه الأداة هذه الخصائص في لوحة واحدة وتظهر النتيجة على الفور.
يستخدم المولد وظيفة التكرار () لأي محور يحتوي على أكثر من مسار واحد، لذا فإن أعمدة قالب الشبكة: التكرار (3، 1fr) هو ما تحصل عليه لشبكة مكونة من ثلاثة أعمدة من الأعمدة المتساوية بدلاً من القائمة المتكررة. تمثل وحدة fr جزءًا صغيرًا من المساحة الحرة في الحاوية، وهو ما يجعل تخطيطات الشبكة سلسة: ثلاثة أعمدة 1fr يأخذ كل منها ثلث العرض وينتعش مع تغيير حجم الحاوية. يمكنك أيضًا مزج مسارات البكسل التلقائية والمحتوى الأدنى والمحتوى الأقصى والثابتة من قائمة حجم المسار.
كل شيء يعمل بالكامل في متصفحك. لا يوجد تسجيل، ولا يتم تحميل أي شيء، وتستمر الأداة في العمل دون اتصال بالإنترنت بمجرد تحميل الصفحة. إنه مفيد كوسيلة مساعدة للتعلم، لأنه يمكنك مشاهدة كيفية تغيير كل خاصية للتخطيط، وكطريقة سريعة لإنتاج شبكة CSS جاهزة للإنتاج لمعرض أو لوحة معلومات أو تخطيط بطاقة أو غلاف صفحة كاملة. تستهدف القاعدة التي تم إنشاؤها فئة حاوية الشبكة وتسرد فقط الخصائص التي لها تأثير مرئي، وبالتالي يظل الإخراج نظيفًا.
كيفية استخدام مولد الشبكة CSS؟
تعيين الأعمدة والصفوف
اختر عدد الأعمدة والصفوف التي يجب أن تحتوي عليها الشبكة وشاهد المعاينة وهي تبني الخلايا.
اختر أحجام المسار
حدد حجمًا للأعمدة والصفوف، مثل 1fr أو محتوى تلقائي أو محتوى صغير أو قيمة بكسل ثابتة.
ضبط الفجوات والمحاذاة
اضبط فجوات الصفوف والأعمدة، ثم اضبط التبرير والمحاذاة مع عناصر الموضع والمسارات.
انسخ css
انسخ قاعدة الشبكة التي تم إنشاؤها والصقها في ورقة الأنماط الخاصة بك، أو استمر في تعديل المعاينة.
الميزات الرئيسية
معاينة حية
تتدفق الشبكة الحقيقية مرة أخرى أثناء تغيير الأعمدة والصفوف وأحجام المسارات والفجوات والمحاذاة.
كرر () الإخراج
تستخدم المحاور متعددة المسارات التكرار () لقيم قالب الشبكة القصيرة والقابلة للقراءة بدلاً من القوائم المتكررة.
fr ومسارات المحتوى
اختر وحدات الكسر أو المحتوى التلقائي أو المحتوى الأدنى أو المحتوى الأقصى أو وحدات البكسل الثابتة لكل محور.
فجوات منفصلة في الصفوف والأعمدة
تعيين الفجوات بشكل مستقل؛ تصدر الأداة اختصار الفجوة أو قيمة واحدة تلقائيًا.
Frequently Asked Questions
Related Tools
CSS Animation Generator
Build CSS keyframe animations from presets like fade, slide, bounce and spin. Adjust duration, easing, delay, iteration and direction, preview live, then copy the keyframes and animation shorthand.
CSS Transform Generator
Build a CSS transform from translate, rotate, scale, skew and 3D perspective with live sliders and a preview, then copy production-ready code.
CSS Transition Generator
Build a CSS transition from property, duration, timing function and delay with a live hover preview, then copy production-ready code. Supports multiple layers.
JWT Generator
Generate and sign JSON Web Tokens with HS256, HS384, or HS512, add standard claims, and copy the token. Runs client-side.
Comments
0 comments
No comments yet. Be the first to share your thoughts!