آموزش کامل CSS Grid

در طی دوره آموزش css grid به شکل کامل و پروژه محور بحث css grid را به شما آموزش خواهم داد تا بتوانید برای پیاده‌سازی پروژه‌های خود از css grid استفاده کنید.

آموزش کامل 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 نخواهید داشت.

 

 
 
 

سوالات متداول

?

آیا آموزش css grid وبسایت راکت کافی است ؟

در دوره آموزش css grid ما سعی کرده‌ایم به شکل کامل و مفصل به همراه مثال‌های کافی مبحث css grid را به شما آموزش دهیم در طی این دوره شما به شکل کامل css grid را یاد میگیرید و می‌توانید در پروژه‌های خود از آن بهره ببرید.

?

css grid ارزش یادگیری دارد ؟

ماژول grid زمان زیادی نیست که برای استفاده در css معرفی شده، اما خیلی زود مورد توجه طراحان و کدنویسان وب قرار گرفته. اگر مایل هستید که خود را به روز نگه‌ دارید قطعا نیاز دارید این دوره را مشاهده کنید.

?

یادگیری css grid چقدر زمان میبرد؟

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

?

css grid چیست؟

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

گارانتی بازگشت وجه

برای آنکه به شما اطمینان دهیم، که ما از محتوای دوره‌های خود ۱۰۰ درصد مطمئن هستیم، برای این دوره گارانتی بازگشت وجه قرار داده‌ایم و این به این معنی است که اگر شما محتوای این دوره را به شکل کامل مشاهده کنید، اما نتیجه‌ای که به شما قول دادیم را دریافت نکنید ۱۰۰ درصد مبلغ پرداختی شما را برگشت خواهیم زد.

مراحل و فرایند گارانتی

دیدگاه و پرسش

برای ارسال دیدگاه لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام

در حال دریافت نظرات از سرور، لطفا منتظر بمانید

در حال دریافت نظرات از سرور، لطفا منتظر بمانید

تکمیل ضبط
خیلی بد
بد
متوسط
خوب
عالی
4.68 از 71 رای
مدت دوره 01:50:58
تعداد جلسات: 9
نوع دوره: ویژه / نقدی
آخرین آپدیت: 04 / 08 / 1396

این دوره برای اعضای ویژه بصورت رایگان قابل مشاهده است. عضویت ویژه

گواهی پایان دوره
وضعیت: ابتدا وارد سایت شوید
گواهی پایان دوره راکت چیست؟
حسام موسوی
مدرس دوره

اول داستان، طراح گرافیک بودم و ۲ سالی به عنوان طراح مشغول بودم، بعد به برنامه‌نویسی علاقمند شدم و الان بیشتر از ۱۰ ساله که عاشق کدزنی و چالش‌های پروژه‌های مختلفم. به تدریس علاقه خاصی دارم و دوست دارم دانشی که در این راه بدست آوردم را در اختیار دیگران...