Hossam Mohamed15

اختيارك للتقنية يعتمد على التصميم المراد تنفيذه، عادة يستخدم  display flex إذا كان التصميم به صف واحد او عمود واحد،
والdisplay grid إذا كان التصميم به اصفف وأعمدة متعددة لسهولة التحكم في عرض وطول العناصر مع الإبقاء على مرونتها. 
وعندما تتقدم في بناء صفحات معقدة، ستجد هناك استخداماً لكلتا الخاصيتين، ستجد ان ال grid يساعدك في بناء ال layout الأساسي للصفحات اي في نطاق اوسع، وال flex يساعدك في تنظيم العناصر في الdivs أي في نطاق اصغر.. وهذا هو الاستخدام الرائج. 
لذا عليك فهم واتقان ال grid system 
يمكنك لعب هذه اللعبة الممتعة التي ستجعلك تتقن ال grid 
ملاحظة أخيرة :- ستتعلم لاحقاً اطر عمل ومكتبات css مثل Bootstrap و Tailwind ، وستجد أن هذه المكتبات تسهل عليك عملية البناء بدون تعقيد، ومع الوقت ستجد أن الأمر سهل وليس بالتعقيد الذي تراه الآن. 
تمنياتي بالتوفيق

اعتقد انك نسيت ان تغلق ال css rule في سطر 132 

 المنتجات تعرض بجانب الروابط في ال nav  

وذلك بسبب انك استخدمت نفس اسم الكلاس list على ال ul وعلى الdiv الذي يجب ان تظهر به العناصر .. قم بإزالة الكلاس list من ال ul التي في الnav ولاحظ الفرق. 
تمنياتي بالتوفيق