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

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

۱. CSS Grid چیست؟

CSS Grid یک سیستم چیدمان دو‌بعدی است که به شما این امکان را می‌دهد تا عناصر را در یک شبکه (grid) سازماندهی کنید. این روش باعث انعطاف‌پذیری بیشتر و کدنویسی ساده‌تر در طراحی صفحات وب می‌شود.

۲. نحوه فعال‌سازی CSS Grid

برای استفاده از Grid، کافی است خاصیت display: grid; را روی عنصر والد (container) اعمال کنید:

.container {
    display: grid;
}

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

۳. خصوصیات مهم در CSS Grid

الف) تعیین تعداد سطرها و ستون‌ها

با استفاده از grid-template-columns و grid-template-rows می‌توانید تعداد ستون‌ها و سطرها را مشخص کنید:

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px; /* سه ستون با عرض ثابت */
    grid-template-rows: 100px 100px; /* دو سطر با ارتفاع ثابت */
}

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

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* ستون وسط دو برابر ستون‌های کناری است */
}

ب) فاصله بین آیتم‌های شبکه‌ای

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

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px; /* فاصله ۱۰ پیکسلی بین تمام سلول‌ها */
}

ج) ادغام چند سلول (محدوده آیتم‌ها)

با استفاده از grid-column و grid-row می‌توان یک آیتم را در چند سطر یا ستون گسترش داد:

.item {
    grid-column: 1 / 3; /* آیتم از ستون اول تا سوم امتداد می‌یابد */
    grid-row: 1 / 2; /* آیتم در سطر اول قرار دارد */
}

د) چیدمان خودکار آیتم‌ها

با auto-fit و auto-fill می‌توان آیتم‌ها را به‌صورت خودکار در صفحه تطبیق داد:

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

هـ) هم‌راستاسازی آیتم‌ها در شبکه

با استفاده از justify-items و align-items می‌توان نحوه قرارگیری آیتم‌ها را تنظیم کرد:

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center; /* تراز وسط در جهت افقی */
    align-items: center; /* تراز وسط در جهت عمودی */
}

۴. نتیجه‌گیری

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