۱۰ قطعه کد CSS Grid

مسئله سیستم شبکه‌بندی CSS مسئله‌ای جدید نیست، اما در دنیای توسعه‌دهندگان، روند کاری جدیدی به شمار می‌آید. بسیاری از کدنویسان حوضه فرانت-‌اند از خاصیت CSS Grid دانشی ندارند و تنها برخی از آن‌ها این قاعده را در رابط کاربری خود استفاده می‌کنند.

می‌توانید منابع بسیاری را در این زمینه پیدا کنید، وبسایت راکت نیز برای این موضوع دوره «آموزش کامل css grid» را ارائه کرده که گذراندن و مشاهده آن خالی از لطف نیست. در کنار این موضوع مشاهده کردن قطعه‌کدها و مشاهده کدهای دیگر توسعه‌دهندگان نیز می‌تواند کمک بسیاری بکند. از این طریق می‌توانید پروژه‌های واقعی از CSS Grid را مشاهده کنید، پس در نهایت مشکلی از بابت دیدن آن در دنیای واقعی و زمینه عملی نخواهید داشت. 

این مجموعه به شما منابع بسیاری را برای یادگیری، شخصی‌سازی و استایل دهی به هرچیزی که قصد ساختن آن را در CSS Grid دارید می‌دهد.

1. Multi-Image Hero Block

این مورد یکی از جذاب‌ترین طرح‌هایی است با خاصیت CSS Grid نوشته شده است. طرح صفحه خانگی آن به تقلید از صفحات مربوط به مجلات آنلاین ساخته شده است. 

Rachel Andrew توسعه دهنده این پروژه، در برخی از قسمت‌های آن از خاصیت‌های CSS مربوط به دیگر پروژه‌های‌ش استفاده کرده و این موضوع باعث شده که پروژه به خوبی کار کند و در نهایت موضوع اصلی که باید گفت این است که این پروژه به صورت کامل واکنشگرا یا رسپانسیو است.

این پروژه بسیار منحصر به فرد در صفحات موبایل کار می‌کند و مانند دیگر پروژه‌های مشابه نیست. برای مطالعه کدهای CSS Grid این مورد واقعا عالی‌ست و قطعا قطعه کد بسیار خوبی برای افرادی که قصد ساخت یک وبسایت مجله‌ای را دارند به حساب می‌آید.

2. CSS Grid Layout

خاصیت grid-auto-flow قابلیتی است که روی برگه‌های تمام صفحه به خوبی کار می‌کند و برای آن ساخته شده است. این آیتم روی اینکه گرید‌ها را در یک قالب جای دهد و آن‌ها را با تغییرات گرید نمایش دهد تمرکز دارد. 

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

کدهای این پروژه را مطالعه کنید، اگر از برخی قسمت‌های آن متوجه نشدید به یاد بیاورید که گوگل دوست بسیار خوبی برای شماست. تعداد بسیار زیادی از پست‌ها و مطالب در این زمینه وجود دارند که به شما کمک می‌کنند این روند را به خوبی یاد بگیرید.

3. Not-So-Spooky Pumpkin Facts

مورد سوم این لیست یکی از جذاب‌ترین قطعه‌کدها است که کمی شمایل کدتنبل را دارد. در هر حال این طرح توسط CSS Grid پیاده سازی شده است. 

برای اینکه از کدهای این پروژه استفاده کنید و بتوانید براساس موارد مورد نیازتان آن را شخصی سازی کنید نیاز است که تا حدی SCSS/Sass را بدانید، زیرا این پروژه براساس این موارد ساخته شده است. البته می‌توانید برای اینکه خاصیت‌های آن را دقیقتر مشاهده کنید از طریق خود وبسایت CodePen آن را به CSS برگردانید.

یکی از موارد محبوب من در این پروژه تایپوگرافی و رنگ‌های جذاب آن است. این طرح (آیکون‌ها، رنگ‌ها و..) واقعا برای هالووین جذاب است.

4. Auto Hexagonal Layout

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

از این به بعد با استفاده از CSS Grid دیگر نیازی نیست که نگران استایل‌های واکنشگرایی به صورت دستی باشید. این قطعه کد بهترین راه حل برای شروع طرح‌ریزی در جهت ساخت یک پروژه مشابه است. 

5. Pokédex in CSS Grid

تا به حال موردی به اندازه Pokédex خلاقانه ندیده‌ام. این مورد نیز مانند موارد قبلی از CSS Grid استفاده می‌کند. این طرح کاملا براساس HTML و CSS است اما در کنار آن برای پر کردن خانه‌ها از جاوااسکریپت استفاده شده است. 

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

نکته: این پروژه تعاملی نیست، به این معنا که کلیک کردن و کارهایی از این قبیل هیچ نتیجه‌ای نخواهد داشت. اما قسمت مهم ماجرا لایه‌بندی آن است، اضافه کردن ویژگی کلیک و کارهایی از این قبیل بسیار ساده خواهد بود.

6. Simple Grid

بسیار جالب است که طراحی شبیه به کتاب‌ها و قالب‌های پرینت‌شدنی را به دنیای وب بیاوریم. به این مورد نگاه کنید، در آن ستون‌های متفاوتی را همراه با عناوین مختلف مشاهده می‌کنید که بسته به تغییرات اندازه مرورگر، آن‌ها نیز تغییر می‌کنند.

لایه‌بندی این پروژه بدین صورت است که بعد از تغییرات مربوط اندازه مرورگر، ستون‌ها زیر همدیگر می‌آیند و قالب کلی آن‌ها کوچک می‌شود.

این راه حل بسیار خوبی برای مطمئن شدن از این است که ستون‌ها درست بعد از یکدیگر ظاهر می‌شوند و مشکلی از این نظر وجود ندارد.

7. CSS Grid With Flexbox Fallback

همه مرورگرها از ویژگی‌ CSS Grid پشتیبانی نمی‌کنند. به این دلیل است که این قطعه کد به شما یاد می‌دهد که چگونه با استفاده از فلکس‌باکس یک سیستم شبکه‌بندی CSS را ایجاد کنید.

این موضوع واقعا یک تکنیک بسیار هوشمندانه است، جایی که شما می‌خواهید از CSS Grid استفاده کنید اما مرورگر آن را پشتیبانی نمی‌کند. خوشبختانه این کدها به خوبی کامنت گذاری شده اند پس می‌توانید به خوبی آن ها را متوجه شوید و درک کنید.

من نمی‌گویم که این بهترین روش به اصطلاح fallback است اما در هر حال بهتر از هیچ است.

8. Grid Terminology Demo

از نظر واژه‌شناسی با CSS Grid مشکل دارید؟ پس به احتمال بسیار زیاد این مورد بتواند راه حل خوبی باشد. 

اگر پروژه را مشاهده کنید، چند ویژگی منحصر به فرد و خاص را مشاهده می‌کنید، در کنار این متن‌های راهنما را نیز می‌بینید. همچنین می‌توانید محوطه CSS Grid را ببینید و اینکه چگونه آن‌ها روی صفحات وب کار می‌کنند را مشاهده کنید. 

ما قصد نداریم که تمام چیزهای این پروژه را عالی بپنداریم اما واقعا باید گفت که بهترین راه برای کشف کردن خاصیت‌های CSS Grid از طریق یک راه‌حل بصری است. 

9. Using grid-template-columns: repeat()

برای مشاهده کردن و پی بردن به تمام خاصیت‌های grid-template-columns می‌توانید این نمونه را مشاهده کنید. این قطعه کد به شما یاد می‌دهد که چگونه از یک ویژگی به صورت چند بار استفاده کنید و هربار برای ساخت یک چیز مشابه آن‌ را از ابتدای کار تعیین نکنید. 

دوباره تکرار می‌کنم که تمام مرورگرها به خوبی از آن پشتیبانی نمی‌کنند اما مرورگرهای مدرن آن را به خوبی پشتیبانی می‌کنند و در نمایش آن مشکلی ندارند.

همچنین کامنت‌های بسیاری در این کد پیاده‌سازی شده که به شما کمک می‌کند بهتر پروژه را درک کنید.

10. Pure CSS Grid Crossword

برای انتهای مطلب بسیار جذاب خواهد بود اگر به پازل کلمات CSS که توسط Adrian Roworth طراحی شده است نگاه کنید. لایه‌بندی کلی این پروژه توسط خاصیت CSS Gird ایجاد شده است.

چیزی که واقعا این پروژه را جذاب‌تر می‌کند این است که می‌توانید در خانه‌ها ورودی‌هایی را قرار دهید،‌ بدین شکل پازل به خوبی کار می‌کند. 

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

منبع