آموزش کامل CSS Grid

CSS Grid Layout یک سیستم لایه‌بندی دو بعدی (2D) است که به شما امکان می‌دهد تا محتوا را در ردیف‌ها و ستون‌ها تنظیم کنید. برخلاف Flexbox که یک سیستم لایه‌بندی یک‌بعدی (1D) است و تنها می‌تواند عناصر را به صورت افقی یا عمودی مرتب کند، CSS Grid به شما اجازه می‌دهد تا لایه‌بندی‌های پیچیده‌تری را با ترکیب ردیف‌ها و ستون‌ها ایجاد کنید.

چرا باید از CSS Grid استفاده کنید؟

1. انعطاف‌پذیری بالا: CSS Grid به شما امکان می‌دهد تا لایه‌بندی‌های پیچیده‌تری را نسبت به ابزارهای دیگر مانند Flexbox یا float ایجاد کنید.
2. واکنش‌گرا (Responsive): با CSS Grid، به راحتی می‌توانید طراحی‌های واکنش‌گرا ایجاد کنید که به طور خودکار به اندازه صفحه نمایش کاربران تنظیم می‌شود.
3. سازگاری با مرورگرها: CSS Grid توسط اکثر مرورگرهای مدرن پشتیبانی می‌شود و می‌توانید از آن در پروژه‌های واقعی استفاده کنید.

آیا میدانید مدرسه فرانت اند پرنیان، دوره فرانت اند از صفر تا صد را بصورت حرفه ای برگزار میکند؟

نحوه شروع کار با CSS Grid

برای استفاده از CSS Grid، ابتدا باید یک کانتینر (container) تعریف کنید که عناصر داخل آن به صورت شبکه‌ای (grid) چیده شوند. این کار با استفاده از ویژگی display: grid انجام می‌شود.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
}

در کد بالا، 3 ستون هم اندازه و 2 ردیف 100 پیکسلی ایجاد میشود.

جایگذاری آیتم‌ها در شبکه

یکی از مزیت‌های CSS Grid این است که می‌توانید به راحتی عناصر را در موقعیت‌های خاصی در شبکه قرار دهید.

.item1 {
  grid-column: 1 / 3; /* آیتم 1 در ستون‌های 1 و 2 گسترش می‌یابد */
  grid-row: 1 / 2;    /* آیتم 1 در ردیف 1 قرار می‌گیرد */
}

این ویژگی‌ها به شما امکان می‌دهند که یک آیتم را در چندین ستون یا ردیف گسترش دهید یا آن را در جای خاصی از شبکه قرار دهید.

استفاده از Grid در طراحی‌های واکنش‌گرا

با استفاده از CSS Grid، می‌توانید لایه‌بندی‌های خود را به صورت واکنش‌گرا ایجاد کنید تا به طور خودکار به اندازه صفحه نمایش کاربران تنظیم شوند. برای این کار می‌توانید از واحدهای fr و ویژگی‌های CSS مانند minmax() و media queries استفاده کنید.

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr; /* یک ستون کامل در صفحه‌های کوچک */
  }
}

بهترین شیوه‌ها در استفاده از CSS Grid

1. استفاده از نامگذاری grid areas: به جای استفاده از شماره‌های ردیف و ستون، می‌توانید از نام‌های grid area برای دسترسی بهتر به آیتم‌ها استفاده کنید.

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "main sidebar"
    "footer footer";
}

ترکیب CSS Grid با Flexbox: برای دستیابی به بهترین نتایج، می‌توانید از CSS Grid برای ایجاد ساختارهای بزرگ و از Flexbox برای کنترل جزئیات داخلی استفاده کنید.

تست مرورگرها: اطمینان حاصل کنید که طراحی شما در تمام مرورگرها و دستگاه‌ها به درستی نمایش داده می‌شود.

نتیجه‌گیری

CSS Grid یکی از قوی‌ترین ابزارها برای طراحان وب است که به شما امکان می‌دهد لایه‌بندی‌های مدرن، انعطاف‌پذیر و واکنش‌گرا ایجاد کنید. با استفاده از مفاهیم و تکنیک‌هایی که در این مقاله بررسی شد، می‌توانید از CSS Grid برای ایجاد صفحات وب کاربرپسند و زیبا بهره‌مند شوید.

امیدواریم این راهنما به شما کمک کند تا به سرعت و به راحتی از CSS Grid در پروژه‌های خود استفاده کنید. اگر سوالی دارید یا می‌خواهید بیشتر درباره موضوع خاصی بدانید، در نظرات به ما بگویید!