آموزش کامل CSS Grid

در طی دوره آموزش CSS Grids قصد داریم به شکل کامل محبث ماژول Grid که در CSS3 معرفی شده را بصورت مفصل به شما آموزش دهیم. برای آنکه بتوانید این دوره را به شکل کامل مشاهده کنید در ابتدا نیاز است با CSS3 به شکل کامل آشنا باشید برای یادگیری CSS نیز می‌توانید از دوره دوره آموزشی CSS3در وبسایت آموزشی راکت استفاده کنید.

CSS Grids چیست؟

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

البته این چیز جدیدی در CSS نیست و قبل از Grid شما مواردی همچون Flexbox را در اختیار داشتید که البته مزایا و معایب خودش را نیز دارد.

این تنها توضیح کوتاهی راجع به چیستی CSS Grids بود، در ویدیوی اول این دوره آموزشی بصورت کامل‌تر با این موضوع آشنا خواهید شد.

تفاوت CSS Grids و Flexbox در چیست؟

یکی از اصلی‌ترین تفاوت‌های بین CSS Grids و Flexbox بحث "بُعد یا به انگلیسی Dimensional" است. شما بصورت پیشفرض در CSS می‌توانید المنت‌های داخل صفحه را به شکل تک بعدی و دو بعدی چینش کنید. اما منظورمان به صورت دقیق‌تر از تک بعدی و دو بعدی چیست؟

به تصویر زیر دقت کنید.

همانطور که در تصویر بالا مشاهده می‌کنید از Flexbox تنها می‌توانید برای مشخص کردن چینش در بُعد افقی استفاده کرد، برای مثال ساختار منو‌ها در یک مسیر یا ساختار نوار کناری سایت یا مواردی مانند آن، اما با استفاده از CSS Grids شما قابلیت آن را خواهید داشت که در چند بعد المنت‌های خود را چینش کنید. فرض کنید در بالای صفحه شما یک فهرست به عنوان منو وبسایت را دارید، در کنار Sidebar در سمت دیگر باکس محتوا و در پایین Footer، خب در این حالت CSS Grids می‌تواند به خوبی در این زمینه به شما کمک بکند.

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

در ضمن این نکته را هم باید متذکر شد که شما توانایی این را دارید که از هر دو به شکل همزمان استفاده کنید هر کدام برای هدف مشخص.

توجه کنید که، چنین نکاتی را در طی دوره آموزش CSS Girds به شکل عملی به شما نمایش خواهیم داد.

آیا یادگیری CSS Grids سخت است؟

بدلیل اینکه CSS Grids مقداری بحث جدید محسوب می‌شود، آشنایی ابتدایی با آن ممکن است برای تازه کاران تا حدودی سخت باشد اما اگر از قبل با CSS به خوبی کار کرده باشید و از آن برای پیاده‌سازی پروژه‌های مختلف استفاده کرده باشید قطعا کار سختی برای یادگیری CSS Grids نخواهید داشت.