دوره آموزش CSS Grid
دوره رایگان CSS Grid یک برنامه آموزشی کامل و کاربردی است که به شما کمک میکند تا با اصول و مفاهیم CSS Grid آشنا شوید و بتوانید صفحات وب با چیدمانهای پیچیده و حرفهای طراحی کنید. این دوره به صورت کاملاً پروژهمحور طراحی شده است و شما را از مبانی تا تکنیکهای پیشرفته CSS Grid هدایت میکند.
سرفصل های دوره
برای مشاهده ویدیوها ابتدا دکمه شرکت در دوره را بزنید
فصل اول: مفاهیم اساسی CSS Grid
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
Grid Items , Grid Container مفاهیم پایه و اساس کار با CSS Grid را تشکیل میدهند و درک صحیح آنها به شما کمک میکند تا به طور کامل از قابلیتهای این ابزار قدرتمند بهرهبرداری کنید.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
Grid یکی از مهمترین و پایهایترین مفاهیم است که به طراحان وب اجازه میدهد تا ساختارهای پیچیده و انعطافپذیری را برای صفحات وب ایجاد کنند. با استفاده از ;display: grid میتوانید عنصری را به Grid Container تبدیل کنید و تمامی عناصر داخلی آن را به Grid Items تبدیل کنید.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
در CSS Grid، ویژگی grid-template-columns یکی از کلیدیترین ویژگیها است که برای تعریف ساختار ستونهای شبکه استفاده میشود. با استفاده از این ویژگی، شما میتوانید تعداد و اندازه ستونهای Grid Container را تعیین کنید، که به شما این امکان را میدهد تا طرحهای پیچیده و انعطافپذیری را به راحتی پیادهسازی کنید.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
ویژگی grid-template-rows در CSS Grid به شما این امکان را میدهد تا ساختار ردیفهای شبکه را در Grid Container خود تعریف کنید. با استفاده از این ویژگی، میتوانید تعداد و اندازه ردیفها را مشخص کنید و به این ترتیب، کنترل کاملی بر چیدمان عمودی عناصر خود داشته باشید.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
در CSS Grid، ویژگیهای gap، row-gap و column-gap به شما این امکان را میدهند تا فاصله بین خطوط شبکه (ستونها و ردیفها) را تنظیم کنید. این ویژگیها به شما کمک میکنند تا ظاهر صفحه خود را بهتر سازماندهی کنید و فضای مناسبی بین عناصر Grid Items ایجاد کنید.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
ویژگی justify-content در CSS Grid برای تنظیم و تعیین نحوه توزیع فضای اضافی بین و اطراف آیتمهای Grid در امتداد محور اصلی افقی (محور x) استفاده میشود. این ویژگی به شما کمک میکند تا چینش و ترازبندی آیتمهای Grid را در داخل Grid Container بهبود بخشید.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
ویژگی align-content در CSS Grid برای تنظیم و تعیین نحوه توزیع فضای اضافی بین و اطراف خطوط Grid در امتداد محور عمودی (محور y) استفاده میشود. این ویژگی به شما کمک میکند تا چینش و ترازبندی خطوط Grid را در داخل Grid Container بهبود بخشید.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
واحد کسری (Fraction) که با fr نشان داده میشود، یکی از واحدهای مهم و پرکاربرد در CSS Grid است. این واحد برای تقسیم فضای موجود بین ستونها و ردیفها به صورت نسبی استفاده میشود. با استفاده از fr، میتوانید به راحتی فضا را بین ستونها و ردیفها به نسبت دلخواه تقسیم کنید، بدون نیاز به محاسبات پیچیده.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
در CSS Grid، مقادیر min-content و max-content برای تنظیم اندازه ستونها و ردیفها استفاده میشوند. این مقادیر به شما اجازه میدهند تا اندازه عناصر را بر اساس محتوای درون آنها تنظیم کنید. با استفاده از این مقادیر، میتوانید طراحیهای انعطافپذیرتر و دقیقتری ایجاد کنید.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
تابع ()minmax در CSS Grid یک ابزار قدرتمند است که به شما اجازه میدهد اندازه ستونها و ردیفها را با استفاده از حداقل و حداکثر مقادیر مشخص کنید. این تابع به شما کمک میکند تا طراحیهای انعطافپذیر و تطبیقپذیری ایجاد کنید که به طور خودکار با تغییرات محتوایی و ابعاد صفحه تنظیم میشوند.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
ویژگیهای grid-column-start و grid-column-end به شما این امکان را میدهند که موقعیت شروع و پایان یک عنصر Grid Item را در ستونهای Grid Container تعیین کنید. به طور مشابه، ویژگیهای grid-row-start و grid-row-end برای تعیین موقعیت شروع و پایان یک عنصر در ردیفهای Grid Container استفاده میشوند. این ویژگیها به شما کنترل دقیقتری بر چیدمان عناصر در شبکه CSS Grid میدهند.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
ویژگیهای grid-area و grid-template-areas در CSS Grid به شما اجازه میدهند تا نواحی خاصی را در Grid Container تعریف کنید و Grid Items را به این نواحی اختصاص دهید. این ویژگیها برای طراحیهای پیچیده و سازمانیافته بسیار مفید هستند و به شما امکان میدهند تا طرحهای شبکهای سادهتر و خواناتری ایجاد کنید.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
ویژگیهای auto-fit و auto-fill در CSS Grid به شما امکان میدهند تا ستونها و ردیفها را به صورت خودکار بر اساس فضای موجود پر کنید. این ویژگیها بسیار مفید هستند زمانی که میخواهید یک طرح شبکهای ریسپانسیو و منعطف ایجاد کنید که به طور خودکار با تغییر اندازه صفحه تنظیم شود.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
ویژگی grid-template در CSS Grid یک ویژگی میانبر است که به شما امکان میدهد به طور همزمان ستونها، ردیفها و مناطق (areas) شبکه را در یک دستور تعریف کنید. این ویژگی ترکیبی از ویژگیهای grid-template-rows، grid-template-columns و grid-template-areas است و به شما اجازه میدهد تا یک ساختار شبکهای پیچیده را به صورت خلاصه و خوانا تعریف کنید.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
در این تمرین، قصد داریم یک صفحه وب ساده با استفاده از CSS Grid ایجاد کنیم که شامل بخشهای هدر، سایدبار، محتوای اصلی، و فوتر باشد.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
یسپانسیو سازی طراحی وب به این معناست که صفحات وب بهطور خودکار با تغییر اندازه صفحهنمایش یا دستگاه، به بهترین شکل ممکن نمایش داده شوند. CSS Grid ابزار قدرتمندی برای ایجاد طرحهای ریسپانسیو است. در این بخش، یک مثال از ریسپانسیو سازی طراحی با CSS Grid ارائه میشود.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
ویژگیهای justify-self، justify-items، align-self و align-items در CSS Grid برای کنترل ترازبندی عناصر در شبکه استفاده میشوند. این ویژگیها به شما امکان میدهند تا کنترل دقیقی بر نحوه چینش و ترازبندی عناصر Grid در شبکه خود داشته باشید.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
ویژگی order در CSS Grid به شما اجازه میدهد تا ترتیب نمایش Grid Items را بدون تغییر در ساختار HTML تغییر دهید. با استفاده از این ویژگی، میتوانید کنترل بیشتری بر ترتیب نمایش عناصر در شبکه داشته باشید، حتی اگر ترتیب آنها در کد HTML ثابت باشد.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
ویژگی inline-grid در CSS Grid به شما این امکان را میدهد که یک عنصر را به عنوان یک Grid Container نمایش دهید، اما این عنصر همچنان به عنوان یک عنصر درونخطی (inline) رفتار میکند. این ویژگی مشابه display: grid; عمل میکند، با این تفاوت که عنصر همچنان در جریان درونخطی قرار میگیرد.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
همانطور که پیشتر گفته شد، ویژگی grid-area به شما اجازه میدهد تا Grid Items را به نواحی مشخص شده در grid-template-areas اختصاص دهید. همچنین میتوانید از این ویژگی برای تعیین موقعیت و اندازه یک Grid Item به صورت ترکیبی از خطوط شروع و پایان ستونها و ردیفها استفاده کنید.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
ویژگی grid-auto-rows در CSS Grid به شما اجازه میدهد تا ارتفاع ردیفهای خودکار (implicit rows) را در Grid Container تعریف کنید. این ویژگی زمانی مفید است که تعداد ردیفهای شما از تعداد ردیفهای تعریف شده در grid-template-rows بیشتر باشد و میخواهید کنترل بیشتری بر ارتفاع این ردیفهای اضافی داشته باشید.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
ویژگیهای grid-auto-columns و grid-auto-flow در CSS Grid به شما کمک میکنند تا ستونها و نحوه جریاندهی آیتمهای Grid را در صورت تجاوز از محدوده تعریف شده، مدیریت کنید. این ویژگیها به شما کنترل بیشتری بر رفتار شبکه CSS Grid میدهند، به خصوص زمانی که تعداد آیتمهای Grid بیشتر از تعداد ستونها و ردیفهای تعریف شده باشد.
فصل دوم: نمونه پروژه عملی CSS Grid
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
