هیچ دوره ای در سبد خرید شما وجود ندارد
اهمیت آموزش 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 چیست ؟
گرید مجموعه ای از خط های افقی و عمودی می باشد که امکان ایجاد چیدمان های شبکه ای را به ما میدهد. حتی در گرید میتوانیم مشخص کنیم که تقسیمات صفحه ما به چه شکلی باشد؛ یعنی مثلا عرض صفحه را به 12 بخش مساوی تقسیم کرده و هر تعداد از بخش ها را به دلخواه به یکی از Division های خود اختصاص میدهیم. دقیقا همان کاری که بوت استرپ در پس زمینه انجام میدهد. پس شما با دیدن آموزش css grid دیگر بدون نیاز به بوت استرپ میتوانید طراحی ریسپانسیو یا واکنشگرا انجام دهید.
تفاوت CSS Grid و Flex Box چیست؟
همانطور که پیش از این گفته شد، گرید یک سیستم چیدمان دو بعدی است که در آن قادر به ایجاد چیدمان های شبکه ای پیچیده هستیم. اما Flex Box یک سیستم تک بعدی است که صرفا در جهت عمودی یا افقی میتوانیم از آن استفاده کنیم. هرچند که هر کدام از این ویژگی ها سر جای خودشان کاربرد داشته و استفاده میشوند؛ اما آموزش CSS Grid در زمینه چیدمان های دوبعدی و پیچیده بهترین عملکرد را خواهد داشت.

مفهوم line ( خط ) در css grid
خطوط دقیقا همان جداکننده های سطر و ستون در گرید میباشند. در استفاده از گرید همواره یک عدد بیشتر از سطر و ستون خود، خط خواهیم داشت. یعنی مثلا اگر 3 سطر تعریف کرده باشیم، 4 عدد خط افقی خواهیم داشت. پس اگر 5 ستون داشته باشیم، 6 عدد خط عودی برای ما شکل میگیرد. این مورد را نیز در آموزش CSS Grid مورد بررسی قرار خواهیم داد. به شما آموزش میدهیم که چگونه آیتم های خود را بر اساس این خطوط بچینید.
maryamlavasani1369 دانشجوی دوره
ببخشید ولی انقد تند تند صحبت میکنید و اصلا نفس گیری بین صحبتاتون انجام نمیدین که آدم دست پاچه میشه
علیرضا احمدی مدرس دوره
سلام و عرض ادب.
حدود 90 درصد از تمام شاگردای من فقط از همین تند صحبت کردن من خوششون میاد. حتی بعضیاشون سرعت صدامو دو برابر میکنن. شاید تند صحبت کنم ولی اصلا کلمه ای جا نمیوفته و تمام کلمات به صورت کامل ادا میشن.
در هر صورت هر کس نظر خودشو داره و راضی نگه داشتن همه دشوار است. انشالله که مدرس بهتری در این زمینه پیدا کنید و موضوع رو بدون استرس یاد بگیرید.
موفق باشید.
Mohammad_Ar_Mi دانشجوی دوره
دقیقا؛ منم رو دوبرابر میزارم.
بابت دوره های خوبتونهم ممنون.
علیرضا احمدی مدرس دوره
قربون شما. موفق باشید
میلاد حاتمی دانشجوی دوره
سلام وقت بخیر
دوره خوبی بود و متشکرم از مدرس دوره
فقط گاهی اوقات نکات رو خیلی تکرار میکردن
یه سوال از مدرس داشتم:
در صورتی که یک قالب رو بشه با سه حالت. استایل های css یا flex-box یا css grid پیاده سازی کرد. از لحاظ پرفورمنس کدومش پیشنهاد میشه؟
علیرضا احمدی مدرس دوره
سلام و درود.
تکرار کردن نکات برای افرادی هست که تازه کار هستند و باید سطح دانش همه رو در نظر بگیریم و قبول دارم که گاها برای افرادی که تجربه بهتری دارن یا بهتر یادمیگیرن، این تکرار کردن ها میتونه خسته کننده بشه.
از نظر پرفورمنس کاملا بستگی به رابط کاربری شما داره. مثلا اگر چند باکس قراره صرفا کنار هم چیده بشن خوب قطعا بهتره از flex استفاده کنیم. وقتی رابط کاربری پیچیده تر میشه و قراره که چیدمان شبکه ای پیچیده رو هندل کنیم، بهتره از گرید ساتفاده بشه.
اما همه اینها چون ویژگی های داخلی CSS هستند، مشکلی از نظر سرعت برای ما ایجاد نمیکنن. چراکه ما یک کتابخونه جدید یا کد خاصی رو اضافه نمیکنیم. و عملا هر بار داریم از همون ویژگی های موجود در CSS بهره مند میشیم.
azad.khalili دانشجوی دوره
ممنون عالی بود
Mahdi_k دانشجوی دوره
بسیار ممنوننن
sab_9185 دانشجوی دوره
مرسی
بسیار عالی و کامل
AlirezaM دانشجوی دوره
دوره ی خوبیه متشکرم
علیرضا احمدی مدرس دوره
خواهش میکنم موفق باشید
mohamad.17 دانشجوی دوره
سلام خسته نباشید میگم استاد دوره مفیدی بود
Amirm2305 دانشجوی دوره
سلام خسته نباشید ببخشید خواستم بپرسم منکه flex بلد هستن برای طرحی قالب HTML نیاز هست حتما گرید هم بلد باشم؟
علیرضا احمدی مدرس دوره
سلام و عرض ادب. بله لازمه چون اینها در کنار هم کار میکنن و هیچکدوم رو نمیشه کلا کنار گذاشت. در ضمن یادگیری گرید هم به شدت ساده و آسونه. پس یاد بگیرید حتما.
bestuser دانشجوی دوره
سلام و درود
پروژه دوره طراحی گالری با روش گرید هست ؟ ظاهرا پروژه گالری نداره! دوره پایان یافته؟؟ ممنون میشم پاسخ بدین
علیرضا احمدی مدرس دوره
سلام و عرض ادب. دوره به شکلی آموزش داده شده که در پایان بتونید یک گالری تصویر رو پیاده سازی کنید. اما چنانچه آموزش خود گالری هم مدنظر و مورد نیاز شما هست، میتونم در یک بروزرسانی تا آخر همین هفته به دوره اضافه کنم. خوشحال میشم با نظرات مفیدتون به ارتقا دوره کمک کنید.
bestuser دانشجوی دوره
سلام استاد احمدی عزیز
خیلی ممنون میشماگر امکانش هست پروژه گالری رو اضافه بفرمایید که دوره جذابیت بیشتری پیدا کنه
علیرضا احمدی مدرس دوره
سلام و عرض ادب. چشم تا جمعه قرار میدم.
bestuser دانشجوی دوره
سلام و درود بر استاد احمدی عزیز،
از بروزرسانی عالی ارسال شده بینهایت سپاسگزارم
علیرضا احمدی مدرس دوره
سلام و عرض ادب. خواهش میکنم وظیفه اس. بازم چیزی کم و کسر بود بگین براتون اضافه کنم.