در حال بارگذاری...

کانتینر Grid

کانتینر Grid (Grid Container) پایه و اساس CSS Grid Layout است که امکان چیدمان منظم عناصر (Grid Items) را در قالب ردیف‌ها و ستون‌ها فراهم می‌کند. تصور کنید در حال ساخت یک خانه هستید: کانتینر Grid مانند اسکلت و چارچوب خانه است و آیتم‌ها مانند اتاق‌ها و وسایل داخل خانه به صورت منظم و دقیق در آن قرار می‌گیرند. در یک فروشگاه آنلاین، کانتینر Grid می‌تواند کارت‌های محصولات را به شکل متقارن و پاسخگو نمایش دهد، در وب‌سایت خبری بخش‌های مقالات و سایدبار را سازمان‌دهی کند، در وبلاگ شخصی پست‌ها و نوار کناری را مرتب کند و در پورتال دولتی بخش‌های اطلاعات و منوها را به صورت واضح و قابل دسترسی بچیند.
در این آموزش، شما یاد می‌گیرید چگونه از ویژگی‌های grid-template-areas، grid-template-columns و grid-template-rows برای ایجاد ساختارهای پیچیده و قابل نگهداری استفاده کنید، با واحدهای fr و minmax لایه‌های پاسخگو بسازید و با gap فاصله مناسب بین آیتم‌ها ایجاد کنید. این مفاهیم مانند سازمان‌دهی کتابخانه هستند که هر کتاب در مکان مشخص خود قرار دارد، و باعث می‌شوند طراحی وب سایت شما هم زیبا و هم قابل نگهداری باشد.

مثال پایه

css
CSS Code 
.grid-container {
display: grid; /* فعال‌سازی حالت Grid */
grid-template-columns: 200px repeat(2, 1fr) 200px; /* ستون‌های ثابت و انعطاف‌پذیر */
grid-template-rows: 100px auto 100px; /* ارتفاع ردیف‌ها */
gap: 20px; /* فاصله بین آیتم‌ها */
}

.grid-item {
background-color: #e0f7fa; /* رنگ پس‌زمینه برای دید بهتر */
border: 1px solid #00796b; /* مرز برای تشخیص آیتم‌ها */
}

در این مثال، display: grid کانتینر را به حالت Grid تبدیل می‌کند. ویژگی grid-template-columns چهار ستون تعریف می‌کند: ستون اول و آخر 200px ثابت و دو ستون میانی با واحد fr که فضای باقی‌مانده را به طور مساوی تقسیم می‌کند. ویژگی grid-template-rows ارتفاع ردیف‌ها را تعیین می‌کند: ردیف اول و سوم 100px و ردیف میانی با auto ارتفاع می‌گیرد تا محتوا را در بر گیرد. gap مقدار فاصله بین آیتم‌ها را مشخص می‌کند.
هر .grid-item دارای رنگ پس‌زمینه و مرز است تا موقعیت آن واضح باشد. این ساختار برای فروشگاه آنلاین، وبلاگ یا سایت خبری مناسب است، زیرا نمایی پاسخگو، منظم و قابل نگهداری ارائه می‌دهد و مشابه مرتب کردن اتاق‌ها یا کتاب‌ها در یک کتابخانه عمل می‌کند.

مثال کاربردی

css
CSS Code 
.dashboard {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-columns: 220px 1fr 1fr;
grid-template-rows: 80px 1fr 60px;
gap: 15px;
}

.header { grid-area: header; background-color: #ffccbc; }
.sidebar { grid-area: sidebar; background-color: #c8e6c9; }
.main { grid-area: main; background-color: #bbdefb; }
.footer { grid-area: footer; background-color: #ffe082; }

این مثال یک داشبورد پیچیده را نشان می‌دهد. grid-template-areas با نام‌گذاری منطقی، ساختار کانتینر را توصیف می‌کند. grid-template-columns یک ستون ثابت برای سایدبار و دو ستون انعطاف‌پذیر برای بخش اصلی می‌سازد. grid-template-rows ارتفاع هدر، بدنه و فوتر را مشخص می‌کند. gap فاصله بین آیتم‌ها را تعیین می‌کند.
این روش برای وب‌سایت‌های خبری، فروشگاه‌های آنلاین و داشبوردها کاربردی است، زیرا امکان تغییر آسان چینش بدون اصلاح HTML را فراهم می‌کند و با استفاده از واحدهای fr و ویژگی‌های پاسخگو، طراحی انعطاف‌پذیر و قابل نگهداری ایجاد می‌شود، مانند چیدمان دقیق یک اتاق یا سازمان‌دهی کتاب‌ها در یک کتابخانه.

بهترین شیوه‌ها و اشتباهات رایج:
Best Practices:

  1. طراحی Mobile-First و آزمون در اندازه‌های مختلف صفحه.
  2. استفاده از واحدهای fr و minmax برای انعطاف‌پذیری.
  3. نام‌گذاری منطقی grid-template-areas و grid-area.

  4. تست پاسخگویی در مرورگرها و دستگاه‌های مختلف.
    Common Mistakes:

  5. استفاده بیش از حد از مقادیر پیکسل ثابت که انعطاف‌پذیری را کاهش می‌دهد.

  6. عدم استفاده از gap و ایجاد فواصل نامنظم بین آیتم‌ها.
  7. تضاد specificity در CSS که باعث بروز مشکلات چیدمان می‌شود.
  8. عدم هماهنگی بین grid-template-areas و عناصر HTML.
    نکات دیباگ: خطوط Grid و مناطق نام‌گذاری شده را با ابزارهای توسعه‌دهنده مرورگر بررسی کنید.

📊 مرجع سریع

Property/Method Description Example
display فعال‌سازی حالت Grid display: grid;
grid-template-columns تعریف اندازه ستون‌ها grid-template-columns: 100px 1fr 2fr;
grid-template-rows تعریف اندازه ردیف‌ها grid-template-rows: 50px auto 50px;
grid-template-areas تعریف مناطق نام‌گذاری شده grid-template-areas: "header header" "sidebar main";
gap تعیین فاصله بین آیتم‌ها gap: 10px;
grid-area اختصاص آیتم به منطقه مشخص grid-area: main;

خلاصه و مراحل بعدی: با درک کانتینر Grid می‌توانید طراحی وب‌سایت‌هایی ساختارمند، پاسخگو و قابل نگهداری ایجاد کنید. mastery ویژگی‌های display: grid، grid-template-rows، grid-template-columns، grid-template-areas، gap و grid-area به شما امکان می‌دهد لایه‌های پیچیده و پویا بسازید و آن‌ها را با HTML و JavaScript ترکیب کنید. برای ادامه یادگیری، پیشنهاد می‌شود ویژگی‌های align-items، justify-items، auto-placement، repeat و minmax را مطالعه و در پروژه‌های عملی مانند فروشگاه آنلاین، وبلاگ و داشبورد به کار ببرید.

🧠 دانش خود را بیازمایید

آماده شروع

آزمون دانش شما

درک خود از این موضوع را با سوالات کاربردی بسنجید.

❓
1
سوالات
🎯
70%
برای قبولی
♾️
∞
زمان
🔄
∞
تلاش‌ها

📝 دستورالعمل‌ها

  • هر سوال را با دقت بخوانید
  • بهترین پاسخ را برای هر سوال انتخاب کنید
  • می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
  • پیشرفت شما در بالا نمایش داده می‌شود
موضوع 45 از 55
Css آموزش