آموزش کانتینر شبکه ای و کار با سطر و ستون (ویدیوی آموزشی)

کانتینر شبکه ای یا Grid Container یکی از ویجت های قدرتمند در افزونه المنتور است که امکان ایجاد طرح‌های منظم و جذاب را با استفاده از ردیف‌ها و ستون‌ها فراهم می‌کند. با استفاده از این ابزار، می‌توانید بخش‌های سایت خود را به راحتی ساختاردهی کنید و طراحی‌های حرفه‌ای ایجاد کنید.

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

کانتینر شبکه ای در المنتور چیست؟

کانتینر شبکه ای در المنتور سیستمی است که به شما امکان می‌دهد محتوای خود را در قالب یک شبکه منظم سازماندهی کنید. این شبکه از تعدادی سلول تشکیل شده که هر سلول می‌تواند یک عنصر (مانند متن، تصویر یا دکمه) را در خود جای دهد. این ابزار به شما کمک می‌کند تا طرح‌های چندستونه و چندردیفی بدون نیاز به دانش کدنویسی ایجاد کنید.

چرا از باید از کانتینر شبکه ای استفاده کنیم؟

1. ایجاد طرح‌های منظم: شما می‌توانید محتوای سایت خود را در ردیف‌ها و ستون‌های دقیق سازماندهی کنید.
2. انعطاف‌پذیری بالا: امکان تغییر اندازه سلول‌ها، افزودن فاصله‌ها و سفارشی‌سازی کامل طرح‌ها وجود دارد.
3. مدیریت آسان: افزودن و حذف المان‌ها در شبکه بسیار ساده است و به راحتی می‌توان بخش‌ها را تغییر داد.
4. طراحی واکنش‌گرا: Grid Container به شما کمک می‌کند طرح‌هایی بسازید که در تمام دستگاه‌ها به‌درستی نمایش داده شوند.

شروع کار با ویجت کانتینر شبکه ای

1. ایجاد یک کانتینر شبکه ای در المنتور:

• وارد صفحه‌ای شوید که می‌خواهید در آن کار کنید و روی گزینه ویرایش با المنتور کلیک کنید.
• در صفحه ویرایش المنتور روی آیکون “+” در وسط صفحه کلیک کنید.
• گزینه شبکه ای را از بین گزینه‌های نمایش داده شده انتخاب کنید.
• ساختار شبکه ای موردنظر خود (مثلاً 2×2 یا 4×4) را از میان ساختارهای پیشنهاد شده انتخاب کنید.

2. افزودن المان‌ها به سلول‌ها

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

• المان دلخواه را از پنل ابزارها انتخاب کرده و به سلول موردنظر بکشید.
• برای افزودن المان‌های بیشتر، کافی است آن‌ها را به سلول‌های دیگر شبکه اضافه کنید.

نکته: اگر بخواهید چند المان را در یک سلول قرار دهید، باید از کانتینر فرزند استفاده کنید.

3. تنظیمات ارتفاع و عرض و آموزش کار با سطر و ستون در المنتور

• به تب آیتم ها در ویرایشگر المنتور بروید و تنظیمات ردیف و ستون را مطابق نیاز خود تغییر دهید.
• می‌توانید ارتفاع ردیف‌ها را روی 1fr تنظیم کنید تا تمامی ردیف‌ها ارتفاع یکسان داشته باشن
• اگر بخواهید تا تعداد ستون ها و ردیف ها را تغییر دهید میتوانید عدد قبل از fr را تغییر دهید (به طور مثال : 1fr 5 fr 2 fr 3fr)
• با استفاده از فاصله ها، میتوانید فاصله بین ردیف ها و ستون های سلول ها را تنظیم کنید.

4. افزودن Container فرزند به سلول‌ها

اگر بخواهید در یک سلول چندین المان داشته باشید:

• یک Container به سلول اضافه کنید.
• تنظیمات Container را از Flexbox به Grid تغییر دهید.
• ساختار دلخواه (مثلاً 2×2) را برای این Grid فرزند انتخاب کنید.
• المان‌ها را به سلول‌های این Container فرزند اضافه کنید.

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

1. هر سلول یک المان: به طور پیش‌فرض، هر سلول تنها می‌تواند یک المان را در خود جای دهد. برای افزودن چند المان، از Container فرزند استفاده کنید.
2. واکنش‌گرایی: تنظیمات شبکه به صورت پیش‌فرض واکنش‌گرا هستند. اما می‌توانید برای دستگاه‌های مختلف، تنظیمات جداگانه‌ای اعمال کنید.
3. طراحی مرتب: با استفاده از تنظیمات در قسمت ترازبندی آیتم ها ، می‌توانید المان‌ها را به صورت مرتب شده قرار دهید.

جمع‌بندی

ویجت Grid Container ابزاری قدرتمند برای ایجاد طرح‌های حرفه‌ای و واکنش‌گرا در المنتور است. این ویجت به شما امکان می‌دهد محتوای خود را در قالب شبکه‌ای از ستون‌ها و ردیف‌ها سازماندهی کنید و طرح‌های منظم و زیبا بسازید. با تمرین و استفاده از این ابزار، می‌توانید طراحی‌های حرفه‌ای و منحصربه‌فردی برای سایت خود ایجاد کنید.

بیشتر بخوانید : آموزش ایجاد کانتینر شبکه ای