درود

نکته ای که باید بهش توجه کنید اینه که ارتفاع در اصل میشه المان سوم که شما به هردوتاشون 3 دادید. یعنی به این صورت هست:

• اولی: ردیف شروع
• دومی: ستون شروع
• سومی: ردیف پایان (یا اگر برحسب span بنویسید پهنای ردیف) که میشه ارتفاع المان
• چهارمی: پهنای پایان (یا اگر برحسب span بنویسید پهنای ستون) که میشه عرض المان

میشه یه طرح کلی از چینش دلخواه تون بکشید (حتی شده با مداد) و بفرستید؟ من براساس اون کدتون رو اصلاح میکنم و بعد روش توضیح میدم تا مفهوم بهتر براتون روشن شه.

سلام مجدد. طرحی که استاد در کلاس طراحی کردند رو خدمتتون با نام layout بارگزاری کردم.

این طرح رو میخواستم طبق ساختار گرید پیاده سازی کنم. یعنی ارتفاع عناصر هم طبق طرح رعایت بشه. اما بعد از پیاده سازی منو (ردیف اول) ، دو عنصر بعد یعنی article و slider ، ارتفاعی یا همون میزان ردیف اشغالی که براشون درنظر میگیرم اعمال نمیشه و فقط میتونم میزان ستون (عرض عنصر) رو کنترل کنم

فایل کد این طرح رو خدمتتون با نام تمرین ضمیمه میکنم. فایل کدهایی که تقدیم کردم رو اگر بررسی کنید متوجه میشید که ردیف هایی که به عناصر برای مشخص کردن ارتفاع دادم اعمال نشده

این هم طرحی که استاد سرکلاس طراحی کردند

سلام مجدد

ممنون بابت آپلود، کدتون رو بررسی کردم.

احتمالا میدونید که وقتی اندازه رو با عدد وارد میکنیم، این میاد پهنای خط رو درنظر میگیره. اما اینکه این پهنای خط چقدر باشه عملا با grid-template-columns و  grid-template-rows تعریف میشه. وقتی خودکار درنظر گرفتید در پشت پرده مقدار پیشفرض یعنی 1px رو به خط میده. پهنای المان هم که در حالت عادی 10px درنظر گرفتید. بنابراین کمتر از مقدار 10 بدید اصلا اعمال نمیشه و اینطور بنظر میاد که ارتفاع نگرفته.

بنده یه فایل زیپ پیوست کردم که شامل دو راه برای حل مشکل هست.

در حالت اول یکم ارتفاع ردیف رو بیشتر کردم (بیش از 10) و اعمال شد.

در حالت دوم مقدارgrid-template-columns و  grid-template-rows رو تعریف کردم و بعد با اندازه‌های زیر ده کار کردم و خواهید دید که در اون حالت هم اعمال میشه.

اگر باز سوالی بود در خدمتم. درصورتی که پاسخ براتون مفید بود، ممنون میشم تیک تایید پاسخ رو بزنید تا برای سایرین هم مفید باشه.

سلام مجدد. ممنونم بابت وقتی که گذاشتید. خیلی لطف کردید. کاملا متوجه شدم

اما دو سوال جزئی :

1 : پس میشه در ابتدای پیاده سازی طرح ، اول تعداد ستون رو با پراپرتی grid-template-columns طبق طرح مشخص کرد و در انتها که مشخص شد از چند ردیف برای ارتفاع عناصر استفاده کردیم ، برگردیم و پراپرتی grid-template-rows را بر اساس ردیف‌ها (ارتفاع‌های درنظر گرفته شده) مشخص کنیم . درسته؟

2 : این قسمت از فرمایشتون رو متوجه نشدم که فرمودید پهنای المان رو 10 پیکسل درنظر گرفتم.

در آخر بازم تشکر میکنم از وقتی که گذاشتید

ممنونم بابت راهنماییتون