مولد CSS Grid

CSS Grid هو نظام تخطيط ثنائي الأبعاد في CSS يتيح لك إنشاء تخطيطات ويب معقدة باستخدام الصفوف والأعمدة. إنه أقوى من Flexbox للتخطيطات كاملة الصفحة لأنه يعمل في البعدين في وقت واحد.

حدد عدد الأعمدة والصفوف، وعرف أحجامها بوحدات مثل px أو fr أو النسب المئوية، واضبط المسافة بين العناصر، وشاهد تخطيطك يُحدَّث في الوقت الفعلي. ثم انسخ كود CSS المُنشأ مباشرة إلى مشروعك.

px يحدد حجمًا ثابتًا، وfr (كسر) يوزع المساحة المتاحة بشكل متناسب، و% يحدد حجمًا نسبيًا للحاوية. يُنصح باستخدام fr للتصميمات المتجاوبة لأنه يتكيف تلقائيًا مع المساحة المتاحة.

خاصية gap تحدد المسافة بين عناصر الشبكة. يمكنك تعيين row-gap وcolumn-gap بشكل مستقل. لقد حلّت محل خاصية grid-gap القديمة وهي الآن الطريقة المعيارية لإضافة المسافات في CSS Grid.

نعم. استخدم وحدات fr للأعمدة المرنة وادمجها مع استعلامات الوسائط CSS في مشروعك. الكود المُنشأ يعمل بشكل مثالي مع تقنيات التصميم المتجاوب.

كل منهما يخدم أغراضًا مختلفة. CSS Grid مثالي للتخطيطات ثنائية الأبعاد (الصفوف والأعمدة معًا)، بينما يتفوق Flexbox في التخطيطات أحادية البعد (صف أو عمود). العديد من التخطيطات الحديثة تجمع بينهما.

CSS Grid مدعوم من جميع المتصفحات الحديثة بما في ذلك Chrome وFirefox وSafari وEdge. وفقًا لـ Can I Use، تبلغ نسبة الدعم العالمية أكثر من 97%.

نعم، CSS Grid يدعم التداخل. يمكنك وضع حاوية شبكة داخل عنصر شبكة لإنشاء تخطيطات أكثر تعقيدًا.

grid-template-areas يتيح لك تسمية مناطق شبكتك وتعيين العناصر إليها بالاسم. يجعل التخطيطات المعقدة أكثر قابلية للقراءة.

استخدم justify-items وalign-items للتوسيط داخل الخلايا، أو justify-content وalign-content لتوسيط الشبكة بأكملها.

نعم. كود CSS المُنشأ يتبع المعايير الحديثة وأفضل الممارسات. يمكنك نسخه مباشرة إلى مشروعك دون تعديلات.

الإصدار الحالي يركز على التعريفات الثابتة للأعمدة والصفوف. لـ auto-fit وauto-fill مع minmax()، يمكنك إضافة هذه القيم يدويًا إلى CSS المُنشأ لشبكات متجاوبة مرنة حقًا.