اموزش گرید در Css : کار با DevTools

در ادامه سری اموزش گرید در Css در این پست میخواهیم با استفاده از DevTools فایرفاکس بخشهای مختلف یک شبکه گرید را به صورت زنده و live مدیریت کنیم.CSS Grid Layout یکی از مناسبترین و زیباترین انتخاب ها برای طراحان و توسعه دهندگان وب است.ابزار توسعه فایرفاکس یا Firefox Developer Tools چند نمونه قالبیت اساسی برای کار با Grid را در اختیار توسعه دهندگان قرار میدهد،شما می تواند با دانلود Firefox Developer Tools به این قابلیت ها دسترسی داشته باشید.

پشتیبانی از Css Grid

پانل طرح بندی CSS جدید در نسخه توسعه دهنده فایرفاکس لیست تمام کانتینر های(نگهدرندهای) گرید CSS موجود در صفحه را نشان می دهد و شامل یک پوشش برای کمک به شما در کنترل و مدیریت آن است.شما می توانید اطلاعات نمایش داده شده در بخش GRID OVERLAY اینسپکت فایرفاکس را، از جمله شماره خطوط گرید و ابعاد و بخشهای مختلف را سفارشی کنید.

اموزش گرید در Css

ارتباط بین گریدها

یکی از قابلیت های نسخه توسعه دهنده‌گان فایرفاکس نمایش یک ارتباط بین لایه ها و خطوط بیرونی شبکه گرید است(INTERACTIVE GRID).با کشیدن ماوس بروی صفحه های مختلف گرید میتواند بخشهای گرید را در اندازه‌ها و صفحات مختلف و همچنین موقعیت هر گرید را مشاهده کنید.

اموزش گرید در Css

مطالب مرتبط:آموزش کامل Css Grid به زبان ساده : بخش اول

نمایش موقعیت هر گرید

تنظیمات “نمایش موقعیت هر گرید” یا DISPLAY GRID AREA جدید، منطقه ها و نام منطقه مربوطه را در هر سلول نشان می دهد. در تصویر زیر به راحتی میتوانید نحوه استفاده از قابلیت را به راحتی درک کنید.

اموزش گرید در Css

افزودن ویژگیهای حرکتی

شما میتوانید به راحتی با استفاده از Grid Inspector تغییرات مختلفی در لایه گرید خود اعمال کنید.یکی از ویژگی ها که در تصویر زیر مشاهده می کنید افزودن transform به گرید جهت حرکت در زوایای مختلف است.شما میتوانید با استفاده از این قابلیت دقیقا ببینید که هر بخش از شبکه گرید چگونه عمل می کند،به چه اندازه مقایس پذیر است.(در دوره Css مقدماتی و پیشرفته ما با ویژگی Transform به صورت کامل آشنا شدیم.)

اموزش گرید در Css

تمامی این ویژگی ها در نسخه توسعه دهنده‌گان فایرفاکس قابل دسترسی است شما میتواند با دانلود این نسخه به تمامی این قابلیت ها دسترسی داشته باشید.

تاکنون هیچ نظری ثبت نشده است