CSS grid چیست؟

یک ماژول در CSS است که به توسعه‌دهندگان وب کمک می‌کند طرح‌های پیچیده واکنش‌گرا (یا Responsive) را راحت‌تر پیاده‌سازی کنند. grid این امکان را می‌دهد که هنگام طراحی صفحات وب بتوان صفحه را به بخش‌های مختلف تقسیم کرد؛ به‌گونه‌ای که این بخش‌ها با یکدیگر تداخل نداشته باشند.

باید توجه داشت که به جز CSS grid روش‌های دیگری هم برای کنترل بخش‌های مختلف یک صفحه وب وجود دارد مانند: جداول (tables)، مدلهای جعبه‌ای (box model) و CSS flexbox که هرکدام دارای مزایا و معایب مخصوص به خود هستند. البته استفاده از جداول در طراحی منسوخ شده و دیگر استفاده نمی‌شود.

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

در طرف مقابل ساختار دو بعدی را داریم. مثلا منوی بالای صفحه با منوی کنار صفحه یک سایت را کنار یکدیگر به عنوان یک عنصر دوبعدی در نظر بگیرید. یعنی اِلمان‌ها در دو بعد یا دو جهت قرار گرفته اند. در این حالت استفاده از CSS grid توصیه می‌شود. چون سرعت کار را بالا برده و خروجی بهتری می‌دهد.

همچنین می‌توان به طور همزمان از CSS grid و flexbox استفاده کرد تا کار با قالب بندی و Layout آسان‌تر شود.

مزایای استفاده از CSS grid

CSS grid نسبت به ابزارهای قبل از خود مثل float و position در CSS که قبلا به طور گسترده توسط طراحان وب استفاده می‌شد، طرح‌بندی نامتقارن‌تری ارائه می‌کند. همینطور css grid اجازه می‌دهد کدهای استانداردتری نوشته‌ شود که در مرورگرهای مختلف به خوبی کار کنند. این ماژول به جای تمرکز روی راه‌حل‌های پیچیده یا استفاده از ترفندهایی مثل CSS Hacks روی شفافیت طراحی تمرکز دارد.

یکی از مشکلات رایج float این است که با اضافه کردن اِلمان و محتوای جدید به یک بخش از صفحه، ممکن است لایه بندی ما به هم ریخته و کل صفحه خراب شود. این اتفاق به این دلیل رخ می‌دهد که اِلمان‌های صفحه‌ی ما از ارتفاع‌های مختلفی برخوردار هستند و از آنجایی که flexbox از لایه‌های انعطاف پذیر پشتیبانی می‌کند، می‌توان با کمک آن، صفحات پیچیده را به آسانی طراحی کرد.

سایر مزایای استفاده از CSS grid عبارتند از:

• اندازه‌های ثابت و منعطف

• تعیین محل المان‌ها

• تقسیم به بخش‌های کوچک‌تر برای نگهداری محتوا

• کنترل ترازبندی

• کنترل برخورد المان‌های مختلف با یکدیگر و پشتیبانی از همپوشانی