من CSS Grid إلى Tailwind

grid-template-columns: repeat(3, 1fr) → grid-cols-3. المسارات المخصصة بقيم اختيارية.

تنتقل الشبكات المنتظمة بسلاسة، إذ يقابل grid-template-columns: repeat(3, 1fr) الصنف grid-cols-3. لكن المسارات التي تخلط وحدات مختلفة أو عروضًا ثابتة تنتهي إلى قيم حرة يصعب قراءتها داخل الترميز. أما التخطيطات المبنية على مناطق مسماة فغالبًا ما يكون بقاؤها في CSS خيارًا أفضل.

قوالب صريحة

grid-template-columns بـ fr ثابت غالبًا → grid-cols-*. الكسور النادرة أو minmax المعقد يطلب brackets أو CSS.

مناطق مسماة

grid-template-areas نادرًا ما يكون 1:1 إلى أدوات. أبقِ المناطق في CSS أو بسّط الـ markup.

gap وauto-flow

gap-* وgrid-flow-* يغطيان كثيرًا من اليومي دون لمس الصفوف/الأعمدة يدويًا.

جرّب

فتح المحوّل

.example { display: flex; gap: 1rem; padding: 1rem; }

ملاحظة ثقة: تحقق بصريًا من النتيجة. المحوّل مسودة مساعدة للمطوّرين.