سلام, قراره راجبه شبکه گرید در متریالایز و نحوه استفاده ازش صحبت کنیم امیدوارم که خوشتون بیاد.
بدون مقدمه و حرف اضافی شروع میکنم!
برای ایجاد کانتینر دقیقا مثل بوت استرپ عمل میکنیم و کافیه به تگ مورد نظرمون کلاس container رو اضافه کنیم.
عرض کانتینر برای دستگاه های مختلف در تصویر زیر مشخص شده.
شبکه گرید صفحه رو به صوررت افقی به ۱۲ بخش تقسیم میکنه.
برای استفاده از گرید کافیه یک تگ div ایجاد کنین و کلاس row رو بهش اضافه کنین
بقیه اجزا باید درون این تگ قرار بگیرن, به مثال زیر نگاه کنین تا براتون جا بیوفته!
نتیجه کدهای بالا میشه تصویر زیر
توضیحات کد:
همون طور که میبینید تگ div با کلاس row به عنوان والد قرار گرفته و بقیه تگ ها (فرزندان) مابین این تگ قرار گرفتن.
همه فرزندان باید کلاس col رو داشته باشن تا در جای مناسب قرار بگیرن.
حالا بریم سراغ کلاس s1 , درواقع s همون مخفف شده small هست, منظور اینه برای دستگاه های کوچک یعنی موبایل.
اون عدد جلوش مشخص میکنه چند بخش از اون 12 بخش رو تصاحب کنه و از 1 تا 12 متغیر هست.
یه مثال دیگه
همون طور که میبینید تگی که از s12 استفاده کرده کل صفحه رو تصرف کرده و بقیه اجزا رو به خط بعدی برده, و هر کدوم از تگ هایی که از کلاس s6 استفاده کردن فقط 6 قسمت از 12 قسمت (یعنی نصف صفحه) رو تصرف کردن.
فکر کنم حالا متوجه شدین اون عدد جلوی s برای چی هست.
حالا باید بدونید که به جای s میشه از گزینه های دیگه ای هم استفاده کرد
لیست این گزینه ها در تصویر زیر مشخص شده
همون طور که میبینید از کلاس s برای موبایل و دستگاه های بزرگتر, m برای تبلت و دستگاه های بزرگتر, l برای دسکتاپ و دستگاه های بزرگتر و در نهایت xl برای دستگاه های خیلی بزرگ استفاده میشه.
میشه به صورت ترکیبی ازشون استفاده کرد, مثلا کلاس های s1 و m4 و l6 رو به یک تگ اضاف کرد
این کار باعث میشه در هر دستگاه بخشی که مشخص کردیم رو تصرف کنه
مثال
در مثال بالا ما از دسکتاپ استفاده کردیم در نتیجه کلاس l خصوصیاتش رو نشون داد
اما اگر از موبایل استفاده میکردیم کلاس s خودشو نشون میداد , درست مثل تصویر زیر
یعنی هر تگ فرزند ۱۲ قسمت (کل صفحه) رو تصرف میکرد.
یکی دیگه از خصوصیات عالی شبکه گرید در متریالایز آفست هست
برای اینکه درکش کنین به تصویر زیر نگاه کنین
همون طور که میبینین این کلاس (offset) باعث میشه عنصر مدنظرتون یک یا چند بخش از سمت چپ فاصله بگیره, بعد از نوشتن کلاس offset باید مشخص کنید که در چه نوع دستگاه و به چه میزان فاصله بگیره
نحوه نوشتن در تصویر بالا مشخصه.
ممنون که این مقاله رو مطالعه کردین برای دریافت اطلاعات بیشتر از فریمورک متریالایز اینجا کلیک کنین.
اگر سوالی داشتین پاسخگو هستم.
با تشکر
