مولد CSS Grid
مولد CSS Grid مرئي مجاني مع معاينة مباشرة. صمم تخطيطات شبكية متجاوبة بشكل تفاعلي وصدّر كود CSS جاهز للإنتاج فوراً.
ما هو CSS Grid؟
CSS Grid هو نظام تخطيط ثنائي الأبعاد في CSS يتيح لك إنشاء تخطيطات ويب معقدة باستخدام الصفوف والأعمدة. إنه أقوى من Flexbox للتخطيطات كاملة الصفحة لأنه يعمل في البعدين في وقت واحد.
كيف يعمل مولد CSS Grid هذا؟
حدد عدد الأعمدة والصفوف، وعرف أحجامها بوحدات مثل px أو fr أو النسب المئوية، واضبط المسافة بين العناصر، وشاهد تخطيطك يُحدَّث في الوقت الفعلي. ثم انسخ كود CSS المُنشأ مباشرة إلى مشروعك.
ما الفرق بين وحدات px وfr و%؟
px يحدد حجمًا ثابتًا، وfr (كسر) يوزع المساحة المتاحة بشكل متناسب، و% يحدد حجمًا نسبيًا للحاوية. يُنصح باستخدام fr للتصميمات المتجاوبة لأنه يتكيف تلقائيًا مع المساحة المتاحة.
ماذا تفعل خاصية gap؟
خاصية gap تحدد المسافة بين عناصر الشبكة. يمكنك تعيين row-gap وcolumn-gap بشكل مستقل. لقد حلّت محل خاصية grid-gap القديمة وهي الآن الطريقة المعيارية لإضافة المسافات في CSS Grid.
هل يمكنني إنشاء تخطيطات متجاوبة مع هذه الأداة؟
نعم. استخدم وحدات fr للأعمدة المرنة وادمجها مع استعلامات الوسائط CSS في مشروعك. الكود المُنشأ يعمل بشكل مثالي مع تقنيات التصميم المتجاوب.
هل CSS Grid أفضل من Flexbox؟
كل منهما يخدم أغراضًا مختلفة. CSS Grid مثالي للتخطيطات ثنائية الأبعاد (الصفوف والأعمدة معًا)، بينما يتفوق Flexbox في التخطيطات أحادية البعد (صف أو عمود). العديد من التخطيطات الحديثة تجمع بينهما.
ما المتصفحات التي تدعم CSS Grid؟
CSS Grid مدعوم من جميع المتصفحات الحديثة بما في ذلك Chrome وFirefox وSafari وEdge. وفقًا لـ Can I Use، تبلغ نسبة الدعم العالمية أكثر من 97%.
هل يمكنني تداخل الشبكات داخل شبكات أخرى؟
نعم، CSS Grid يدعم التداخل. يمكنك وضع حاوية شبكة داخل عنصر شبكة لإنشاء تخطيطات أكثر تعقيدًا.
ما هو grid-template-areas؟
grid-template-areas يتيح لك تسمية مناطق شبكتك وتعيين العناصر إليها بالاسم. يجعل التخطيطات المعقدة أكثر قابلية للقراءة.
كيف أوسط العناصر في CSS Grid؟
استخدم justify-items وalign-items للتوسيط داخل الخلايا، أو justify-content وalign-content لتوسيط الشبكة بأكملها.
هل كود CSS المُنشأ جاهز للإنتاج؟
نعم. كود CSS المُنشأ يتبع المعايير الحديثة وأفضل الممارسات. يمكنك نسخه مباشرة إلى مشروعك دون تعديلات.
هل يمكنني استخدام auto-fit وauto-fill مع هذا المولد؟
الإصدار الحالي يركز على التعريفات الثابتة للأعمدة والصفوف. لـ auto-fit وauto-fill مع minmax()، يمكنك إضافة هذه القيم يدويًا إلى CSS المُنشأ لشبكات متجاوبة مرنة حقًا.
كيفية استخدام مولد CSS Grid
صمّم تخطيطات CSS Grid بشكل تفاعلي وصدّر كودًا جاهزًا للاستخدام. تُحسب المعاينة محليًا في متصفحك ولا يُرفع أي بيانات.
- اضبط column-gap و row-gap للتحكم في المسافات بين المسارات.
- اختر قيم justify-items و align-items مثل stretch أو start أو end أو center لتموضع العناصر داخل خلاياها.
- وزّع الشبكة كاملةً عبر justify-content و align-content، مثل space-between أو space-around أو space-evenly.
- راقب المعاينة الحية أثناء تعديل كل قيمة، ثم انسخ كود CSS الناتج.
لا يظهر أثر align-content إلا عندما تكون الشبكة أصغر من حاويتها، فامنح الحاوية ارتفاعًا ثابتًا لترى التوزيع.
أدوات ذات صلة
- مولد CSS Flexbox مولد CSS Flexbox مرئي مع معاينة مباشرة. اضبط خصائص flex واحصل على كود CSS جاهز للاستخدام.
- مولد تدرجات CSS أنشئ تدرجات CSS مذهلة بصريًا. أنشئ تدرجات خطية وشعاعية ومخروطية مع نقاط ألوان متعددة وزوايا ومواضع مخصصة. انسخ كود CSS الجاهز للإنتاج فورًا.
- مولد ظل الصندوق CSS مولد ظل الصندوق CSS مجاني عبر الإنترنت. أنشئ ظلالاً جميلة بصريًا مع إزاحة وضبابية وانتشار ولون وظل داخلي قابلة للتعديل. معاينة مباشرة ونسخ فوري للكود.
- مولد Border Radius CSS مولد border-radius CSS مرئي. اضبط كل زاوية بشكل مستقل مع معاينة فورية وانسخ كود CSS مباشرة.
- مولد الحواف الدائرية الإبداعية مولد حواف دائرية إبداعي مجاني عبر الإنترنت. اسحب المقابض الثمانية أو اختر شكلًا جاهزًا لإنشاء أشكال CSS عضوية ونسخ الكود فورًا.
- محول الألوان محول ألوان مجاني عبر الإنترنت. تحويل فوري لتنسيقات HEX و RGB و HSL و HSV مع منتقي بصري. 100% خاص، يعمل في متصفحك.
- مولد التخفيف CSS مولد التخفيف في CSS مجاني عبر الإنترنت. اسحب نقطتي تحكم cubic-bezier على منحنى تفاعلي، واختر من بين 18 نمطًا جاهزًا، وشاهد معاينة بحركة كرة متكررة، وانسخ دالة التوقيت فورًا.
- مولد ظل النص CSS مولد text-shadow في CSS مجاني عبر الإنترنت. رصّ طبقات ظل متعددة مع الإزاحة والضبابية واللون والشفافية، جرّب أنماطًا جاهزة مثل النيون وثلاثي الأبعاد والريترو، وانسخ كود CSS فورًا.