درس 36 ارومیا دیزاین؛ CSS Grid
ZIP را استخراج کنید و index.html را باز کنید؛ نصب و اینترنت لازم نیست.
style.css شبکه آماده خدمات را اجرا می کند. پنجره را در عرض های 320، 768 و 1280 پیکسل بررسی کنید.
ستون های ردیف های مختلف باید هم راستا بمانند. کارت تنها در آخرین ردیف مثل Flexbox کل عرض را نمی گیرد.
در CSS کارت ها، auto-fit را موقتاً با auto-fill عوض کنید و تعداد کارت ها را به دو مورد کاهش دهید؛ تفاوت فضای ستون های خالی در عرض بزرگ مشخص می شود.
در بخش lines، کادر wide از خط 1 تا خط -1 می رود. در نوشتار افقی RTL، خط ستون 1 در سمت راست است.
تمرین مستقل: practice را Grid کنید؛ فاصله 16px، حداقل پیشنهادی 220px و ستون های منعطف بسازید.
پاسخ solution.css از ابتدا فعال نیست؛ پس از تلاش خودتان این خط را بعد از style.css داخل head اضافه کنید:
<link rel="stylesheet" href="solution.css">
بعد از فعال کردن پاسخ، کارت های تمرین باید شبکه شوند و در صفحه باریک به یک ستون برسند.
متن یک کارت را بلند کنید و کارت ششم اضافه کنید. محتوا نباید حذف شود و اسکرول افقی ناخواسته نباید ایجاد شود.
با Tab همه لینک ها را دنبال کنید؛ ترتیب فوکوس باید با ترتیب منطقی متن هماهنگ باشد.
همه اعداد کدهای HTML و CSS انگلیسی هستند.
