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

۱ فصل
۶ جلسه
۱ ساعت
۱

لیست ویدئوهای دوره

۶ قسمت
۰۱:۰۵:۰۹

معرفی ویژگی Grid و کاربرد آن در CSS

رایگان
۰۸:۰۵

تغییر display آیتم ها به حالت Grid

۱۵:۰۴

استفاده از ویژگی های grid-template-row و gap

۰۸:۴۷

چند ستونه کردن div ها با استفاده از grid-column

۱۱:۲۳

پیاده سازی یک مینی پروژه با استفاده از grid-column

۰۹:۲۳

بخش بندی صفحه سایت با استفاده از ویژگی area

۱۲:۲۷

اهمیت آموزش CSS Grid

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

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

CSS Grid

چیدمان های شبکه ای با Grid

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

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

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

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

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

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

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

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

  • تغییر display تگ ها به Grid
  • تعریف Container برای child ها
  • استفاده از خصوصیت grid-template-column
  • استفاده از ویژگی grid-template-row
  • ایجاد فاصله میان آیتم ها با استفاده از gap
  • چند ستونی کردن آیتم با استفاده از grid-column
  • چند سطری کردن آیتم با استفاده از grid-row
  • بخش بندی کردن صفحه با grid-template-area
  • مشخص کردن بخش برای هر آیتم با استفاده از grid-area
  • پیاده سازی یک مینی پروژه برای بخش بندی کردن سایت
توضیحات بیشتر