قراره تو این دوره چی یاد بگیرم؟

  • آشنایی با grid
  • آشنایی با container properties
  • آشنایی با grid items properties
  • انجام چالش ها و پروژه های مربوط به css grid
  • و ...

سرفصل های دوره

۴ فصل
۸ جلسه
۳ ساعت
۱

معرفی دوره

۱ قسمت
۰۰:۰۷:۲۱
1

معرفی دوره

رایگان
۰۷:۲۱
۲

فصل اول – آموزش Grid

۲ قسمت
۰۱:۱۰:۱۰
۳

فصل دوم – چالش Css Grid

۱ قسمت
۰۰:۲۸:۱۸
۴

فصل سوم – پروژه ها

۴ قسمت
۰۱:۳۸:۳۵

آموزش CSS Grid یکی از مباحث مهم در برنامه نویسی وب برای طراحی چیدمان های شبکه ای در وبسایت هایی که با HTML و CSS پیاده سازی میکنیم، یک نیاز ضروری خواهد بود. گرید در CSS یک سیستم چیدمان دو بعدی برای طراحی صفحات وب می باشد و به شما این امکان را می دهد که ردیف ها و ستون ها را از یکدیگر جدا کنید. این سیستم امکانات و ویژگی های زیادی دارد که پیاده سازی طرح های پیچیده را برای شما راحت می سازد.

سرفصل های دوره آموزش CSS Grid :

  • آشنایی با grid
  • آشنایی با container properties
  • آشنایی با grid items properties
  • انجام چالش ها و پروژه های مربوط به css grid

پیش نیاز های دوره آموزش Grid CSS :

همانطور که از عنوان آموزش مشخص است، گرید یک خصوصیت و ویژگی در زبان CSS میباشد که بر روی تگ های HTML پیاده سازی میشود. پس قطعا یکی از پیش نیاز های اساسی این دوره، توانایی کار با زبان های HTML و CSS در حد ابتدایی خواهد بود. در نهایت پیشنهاد میشود که ابتدا توانایی کار با این زبانها را فرا گرفته و سپس به سراغ این دوره آموزشی بیایید.

آنچه در این دوره می‌آموزید

در دوره آموزش css grid با ویژگی Grid در زبان CSS آشنا شده و یاد میگیریم که چگونه با تغییر display میتوانیم از گرید استفاده کنیم. یکی از مهمترین بخش های آموزش داده شده در این دوره، طریقه استفاده از Grid area برای بخش بندی کردن صفحه میباشد. با استفاده از این خصوصیت میتوانیم همانند Bootstrap صفحه سایت را به تعداد قسمت های دلخواه تقسیم بندی کنیم.

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

CSS Grid

CSS Grid چیست ؟

گرید مجموعه ای از خط های افقی و عمودی می باشد که امکان ایجاد چیدمان های شبکه ای را به ما میدهد. حتی در گرید میتوانیم مشخص کنیم که تقسیمات صفحه ما به چه شکلی باشد؛ یعنی مثلا عرض صفحه را به ۱۲ بخش مساوی تقسیم کرده و هر تعداد از بخش ها را به دلخواه به یکی از Division های خود اختصاص میدهیم. دقیقا همان کاری که بوت استرپ در پس زمینه انجام میدهد. پس شما با دیدن آموزش css grid دیگر بدون نیاز به بوت استرپ میتوانید طراحی ریسپانسیو یا واکنشگرا انجام دهید.

تفاوت CSS Grid و Flex Box چیست؟

همانطور که پیش از این گفته شد، گرید یک سیستم چیدمان دو بعدی است که در آن قادر به ایجاد چیدمان های شبکه ای پیچیده هستیم. اما Flex Box یک سیستم تک بعدی است که صرفا در جهت عمودی یا افقی میتوانیم از آن استفاده کنیم. هرچند که هر کدام از این ویژگی ها سر جای خودشان کاربرد داشته و استفاده میشوند؛ اما آموزش CSS Grid در زمینه چیدمان های دوبعدی و پیچیده بهترین عملکرد را خواهد داشت.

مفهوم line ( خط ) در css grid

خطوط دقیقا همان جداکننده های سطر و ستون در گرید میباشند. در استفاده از گرید همواره یک عدد بیشتر از سطر و ستون خود، خط خواهیم داشت. یعنی مثلا اگر 3 سطر تعریف کرده باشیم، 4 عدد خط افقی خواهیم داشت. پس اگر 5 ستون داشته باشیم، 6 عدد خط عودی برای ما شکل میگیرد. این مورد را نیز در آموزش CSS Grid مورد بررسی قرار خواهیم داد. به شما آموزش میدهیم که چگونه آیتم های خود را بر اساس این خطوط بچینید.

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