یک صفحه HTML بسازید و با استفاده از CSS Grid Areas چیدمان ۵ بخش را پیادهسازی کنید: header، navbar، main، sidebar و footer بهطوری که در دسکتاپ هدر در بالا، نوار ناوبری در سمت چپ، محتوای اصلی در مرکز، سایدبار در سمت راست و فوتر در پایین قرار گیرد.
3.0 بازدید آخرین ویرایش در 221 روز قبل ساعت 01:16 0.0
برای انجام این تمرین یک کانتینر والد بسازید و به آن display: grid بدهید؛ سپس با grid-template-areas نامگذاری مناطق (مثلاً "header header header", "nav main sidebar", "footer footer footer") و با grid-template-columns و grid-template-rows اندازهها را تعیین کنید. به هر عنصر فرزند با grid-area نام متناظر را اختصاص دهید. نکتهها: از علامت نقطه برای سلولهای خالی استفاده کنید، با gap فاصلهها را تنظیم کنید و برای واکنشگرایی از media query استفاده کنید تا در موبایل مناطق به ستونهای پشتسرهم منتقل شوند.
توسط پژوهشگر در 221 روز قبل ساعت 01:16 1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
نکته خوب این تمرین استفاده از grid-template-areas برای تعبیه مناطق بهصورت قابل فهم است. برای واکنشگرایی، در موبایل مناطق را به ستونهای پشتسرهم تبدیل کنید و از media query استفاده کنید تا جایگزینها درست باشند. مطمئن شوید که نامهای grid-area به عناصر فرزند بهدرستی اختصاص داده شده و حتی با DOM ترتیب متفاوت نیز چیدمان درست باقی بماند. همچنین به مفهوم فاصلههای گپ با gap فکر کنید تا فضاهای هموار بین بخشها رعایت شود. اگر ترجیح میدهید، میتوانید از مقادیر minmax برای ستونها استفاده کنید تا نسبت فضای محتوا پایدار بماند.
گزارش