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

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

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

۸ قسمت
۰۱:۲۵:۵۹
1

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

پخش
۰۸:۰۵
3

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

۰۸:۴۷
4

یک تشکر ویژه بابت همراهیت تا اینجای کار

۰۲:۱۲
5

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

۱۱:۲۳
6

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

۰۹:۲۳
7

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

۱۲:۲۷
8

طراحی گالری تصاویر با استفاده از خواص CSS Grid

۱۸:۳۸

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

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

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

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

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

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

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

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

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

CSS Grid

CSS Grid چیست ؟

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

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

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

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

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