Griddy: ابزاری برای آموزش کار با پراپرتی‌های CSS Grid

اگر شما به حوزۀ طراحی وب علاقه‌‌مند هستید، احتمالاً با پراپرتی CSS Grid نیز آشنایی دارید. پس از اینکه این ویژگی به نسخهٔ CSS3 افزوده شد، به‌ سرعت نیز مورد توجه دولوپرهای فرانت‌اند قرار گرفت. CSS Grid در واقع قدرتمندترین سیستم موجود برای طراحی لی‌‌اوت در CSS است؛ این سیستم برای طراحی لی‌‌اوت دوبُعدی در صفحات وب مورد استفاده قرار می‌گیرد و این امکان را برای دولوپرهای فرانت‌اند فراهم می‌آورد تا آیتم‌های مد نظر خود را در ردیف‌ها و ستون‌های کاستومایز شده‌ای قرار دهند. اهمیت Grid در طراحی وب مدرن بسیار بالا است و این ویژگی جدید، بسیاری از مشکلات قدیمی موجود در نحوۀ قرارگیری اِلِمان‌ها در مرورگرها را حل کرده است که در همین راستا، در ادامه قصد داریم ابزاری تحت عنوان Griddy را مورد بررسی قرار دهیم که می‌تواند ابزار کمک‌آموزشی خوبی در این زمینه باشد.

برای درک بهتر CSS Grid، یک بازی سرگرم‌کننده تحت عنوان Grid Garden طراحی شده اما بازی‌ها همیشه نمی‌توانند ایده‌‌های عملی را آن‌طور که باید و شاید، آموزش ‌دهند؛ در همین راستا، ابزار Griddy معرفی شد که ممکن است در زمینۀ آموزش ویژگی‌های CSS Grid، برای دولوپرها مفیدتر عمل کند.

Griddy در واقع یک ابزار یادگیری رایگان برای دولوپرهای فرانت‌اند است که مایل به کسب اطلاعات بیشتر در حوزۀ CSS Grid هستند. وب اپلیکیشن Griddy این امکان را برای شما فراهم می‌کند تا بتوانید گریدها را به‌ صورت بلادرنگ کاستومایز کنید به طوری که هم‌زمان با اِعمال تغییر در گریدها، قطعه کد کوچک مربوط به آن‌ها (اسنیپت‌) آپدیت خواهد شد (Code Snippet در واقع بلوک‌های کوچکی از کد با قابلیت استفادۀ مجدد هستند؛ مثلاً در بحث بک‌اند، این کدها معمولاً شامل بلوک‌های کد معمولی مانند بلوک‌های try-finally یا if-else هستند اما می‌توان از آن‌ها در کلیۀ کلاس‌ها یا متدها استفاده کرد).

همچنین می‌‌توانید با تعریف ستون‌ها، مارجین‌ها (فاصلۀ بین هر سطر و ستون) و حاشیۀ هر اِلِمان از صفحه، گرید سفارشی خود را طراحی کنید، صفحهٔ وب را از نو طراحی کنید و در نهایت کارکرد پراپرتی گرید را نیز یاد می‌گیرید. در ضمن، با استفاده از این وب‌‌ اپلیکیشن می‌توانید آیتم‌های جدیدی نیز به گرید اضافه کرده، برخی موارد را حذف کنید یا اندازۀ آن‌ها را برای طراحی لی‌‌اوت مد نظر خود تغییر دهید.

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

در این سرویس آموزشی آنلاین، می‌توانید فاصلۀ بین ستون‌ها را تعریف کنید، آیتم‌های گرید را هم‌تراز کنید و تنظیمات نحوۀ قرارگیری متن‌ در فضای تعریف‌ شده را تغییر دهید (تمام این تغییرات از طریق فرم‌های قرار گرفته در این ابزار انجام می‌شوند). در هر بار اِعمال تغییرات، حالت پیش‌نمایش گرید و تکه کد کوچک مربوط به آن در پایین صفحه (اسنیپت‌)، به‌ صورت خودکار آپدیت می‌شوند.

ابزار Griddy ممکن است به ‌اندازۀ بازی Grid Garden سرگرم‌کننده نباشد، اما روشی عملی برای یادگیری و درک عینی چگونگی تأثیر پراپرتی CSS Grid بر نحوۀ قرارگیری اِلِمان‌ها در صفحات وب است.