كيفية جعل العناصر تظهر في صف واحد

المشكلة أنك تقوم بإستخدام تخطيط الشبكة grid مع تخطيط flex بشكل خاطئ .

لا أعرف هل تريد إستخدام flex أم grid أم ماذا .

ولكن لجعل العناصر في صف واحد في ملف index.html يرجى نقل سطر 86 ووضعه بعد سطر 73 مباشرة حيث نريد جعل جميع العناصر هي أبناء للعنصر main وليس بداخل content .

وبعد ذلك في ملف index.css يجب حذف من سطر 127 حتى 131 . وتغير سطر 126 ليكون العرض flex هكذا :

.services{
    display: flex;
}

ويمكنك الآن تغير عرض عناصر ال card حيث يظهر أنك تضغ لها عرض 70% وهذا خاطئ يجب وضع عرض مناسب لعدد العناصر في الصف .

index.html index.css

لجعل العناصر في قسم "Services" تظهر كصف واحد بدلاً من الأعمدة، يمكنك تعديل خاصية grid-template-columns في CSS. بدلاً من استخدام repeat(3, 1fr) التي تقوم بتقسيم العناصر إلى 3 أعمدة، يمكنك تعيين قيمة واحدة فقط لتحويلها إلى صف واحد. قم بتغيير الـ CSS كالتالي:

.services {
    display: grid;
    grid-template-columns: 1fr; /* تغيير إلى صف واحد */
    flex-direction: row;
    margin-top: 50px;
    gap: 1rem;
    padding: 0 20px;
}