CSS Grid Layout در تقسیم یک صفحه به مناطق اصلی و در نظر گرفتن اندازه، موقعیت و لایه، بین بخش ها واجزای ساخته شده از HTML ابتدایی به کار می رود.
جداول را در نظر بگیرید، همانند جدول ها، طرح‌بندی یا چیدمان شبکه‌ای CSS grid layout برای نویسنده این امکان را فراهم می سازد تا عناصر را در ستون‌ها و ردیف‌ها تراز کند. با این حال، طرح‌بندی‌های بسیار بیشتری با شبکه CSS نسبت به جداول امکان‌پذیر است، یا حتی می توان گفت آسان‌تر است. به عنوان مثال، عناصر فرزند توسط شبکه بندی لایه ای می توانند خود را طوری قرار دهند که در واقع روی هم قرار بگیرند و لایه لایه شوند، شبیه به کاری که بر روی عناصر توسط پوزیشن یا موقعیت CSS انجام می شوند.
چیدمان شبکه ای به ما این امکان را می دهد که قرارگیری عناصر را در امتداد محورهای عمودی و افقی کنترل کنیم. خالی از لطف نیست که متذکر شویم که این امکان درچیدمان flex box برقرار نیست و در flex فقط در یک راستا می توانیم چیدمان عناصر را انجام دهیم. سیستمی که فلکس باکس باشد، یک سیستم چیدمان 1 بعدی داشته که باعث می شود برخی از طرح‌بندی‌های دو بعدی را نتوان توسط آن پیاده سازی کرد. Flexbox به راحتی می‌تواند از طرح‌های منحصربه‌فردی پشتیبانی کند که سطرها و ستون‌های متعدد را با کمک wrap گسترش می‌دهند.
در CSS Grid ما می توانیم تا آنجا پیش برویم که موقعیت دقیق هر آیتم شبکه را با استفاده از اعداد سطر و ستون تعریف کنیم. از این رو می‌توانیم شبکه CSS را یک سیستم طرح‌بندی دوبعدی بنامیم. شمای ساده ای از تفاوت بین این دو سیستم چیدمان را در تصویر 2 مشاهده می کنید.
چیدمان شبکه ای CSS grid از رویکرد سفت‌و سخت و مبتنی بر طرح‌بندی(layout-driven) برای قرار دادن آیتم پیروی می‌کند. در grid، طرح‌بندی اولیه را دقیقاً با استفاده از تعداد ستون‌ها و/یا ردیف‌هایی با ویژگی‌های grid-template-rows و grid-template-columns تعریف می کنیم. سپس، هنگام محاسبه ارتفاع و عرض هر مورد، از خطوط شبکه ایجاد شده پیروی می کند.
از آنجایی که تمرکز اصلی شبکه CSS بر روی چیدمان است، نتیجه نهایی یک طراحی مبتنی بر شبکه به راحتی قابل پیش بینی است، در صورتی که در فلکس باکس اینطور نیست. Grid همچنین فضایی را برای انعطاف‌پذیری بیشتر در طراحی از طریق افزودن ردیف‌های خودکار در شبکه، ستون‌های شبکه‌ای و ویژگی‌های جریان خودکار شبکه (grid-auto-flow ) ایجاد می کند. این، شبکه را قادر می‌سازد تا ردیف‌ها یا ستون‌های بیشتری را به صورت سیال اضافه کند تا همه موارد موجود را در خود جای دهد.
]چه زمانی از شبکه CSS استفاده کنیم؟
بهترین . کاربردی ترین زمان استفاده از شبکه CSS، زمانی است که بخواهید اجزای رابط کاربری ویا عناصر را با چیدمان های دقیق و منظم کنار هم قرار دهید. در عمل، شبکه CSS معمولاً برای ایجاد طرح‌بندی کل صفحه با هدر، پاورقی، ستون‌های کناری و غیره استفاده می‌شود. طرح‌بندی‌هایی که به سیستم‌های شبکه پیچیده مانند شبکه‌ای ۱۲ ستونی یا طرح‌های نامتقارن نیاز دارند، به طور معمول توسط شبکه‌ی CSS ساخته می شوند.شبکه همچنین برای طراحی اجزای کوچکتر و تک بعدی زمانی که نیاز به قرار گیری دقیق عناصر دارند، مناسب است.
ایجاد طرح‌بندی با عناصر همپوشانی شونده
از آنجایی که شبکه CSS به ما این امکان را می دهد تا موقعیت دقیق یک عنصر را تعریف کنیم، طراحی طرح بندی با اجزای همپوشانی (overlapping) به یک کار ساده تبدیل می شود. در مقایسه، اگر بخواهیم این را با flexbox پیاده‌سازی کنیم، باید به روش هایی مانند تعیین حاشیه‌های منفی، موقعیت‌یابی مطلق یا تبدیل‌ها تکیه کنیم.
دراین مقاله تلاش کردم کلیات و مفهوم این مبحث مهم رو به صورت روان براتون توضیح بدم. اما، پیشنهاد میکنم برای یادگیری هرچه بهتر این مفهوم به صورت عملی از منابع زیر حتما حتما استفاده کنید:
حالا که در حد خوبی با Css grid آشنا شدید میتونید به سایت های زیر هم برید و با بازی کردن این مفهوم را کاملا در ذهن خودتون تثبیت کنید.
حیف هست حالا که با بازی مفهوم گرید رو در ذهن تثبیت کردیم، فلکس باکس رو فراموش کنیم. در سایت زیر میتونید بازی کنید و این مفهوم را هم در ذهن خود تثبیت کنید و درک بهتری از مفاهیم Flexbox و grid داشته باشید.
ممنونم که تا انتهای این مقاله هم با من همراه بودید. امیدوارم با مطالعه این مقاله و مراجع ذکر شده و همچنین بازی ها حاوی این مفاهیم درک صحیح و خوبی از این مفاهیم به دست آورید.
