CSS Grid چیست؟ کاربردهای CSS Grid

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

CSS Grid چیست؟

سی اس اس گرید نوعی ماژول است که عنصرهای منتخب HTML را در صفحه‌های وب نشان می‌دهد. این عنصرها به شکل مدل‌های Grid Box کنار هم قرار می‌گیرند. به‌علاوه، شما با استفاده از این ماژول می‌توانید به راحتی اندازه یک Grid Container را تغییر دهید و آن را جابه‌جا کنید. امکان تغییر اندازه و جابه‌جایی دو بعدی آیتم‌های Grid Container هم وجود دارد. منظور از تغییر اندازه و جابه‌جایی دو بعدی یعنی مدل‌های جعبه‌ای (Box Models) در ردیف‌ها و ستون‌های مختلف به طور همزمان کنار هم قرار می‌گیرند.

ویژگی‌های طرح CSS Grid

ماژول سی اس اس گرید از گریدهای واکنش‌گرا و ساختارمند تشکیل شده است. به‌علاوه شما می‌توانید از واحد fr یا Fraction Unit برای نسبت دادن هر مقدار پیکسل مشخص به گرید استفاده کنید. در ادامه، بقیه ویژگی‌های سی اس اس گرید را معرفی می‌کنیم.

جابه‌جایی آیتم‌ها

شما با استفاده از CSS Grid می‌توانید آیتم‌ها را در جهت دلخواه در Container جابه‌جا کنید. به‌علاوه، با جابه‌جایی آیتم‌ها نشانه‌گذاری HTML یا HTML Markup به هم نمی‌ریزد.

کنترل ترازبندی

ترازبندی (Alignment) یک آیتم یا عنصر در Container در سی اس اس گرید راحت‌تر است. شما در Container می‌توانید آیتم‌ها و عنصرها را به راحتی و در جهت‌های افقی و عمودی جابه‌جا کنید.

ویژگی Grid Container

شما با استفاده از Grid Container می‌توانید آیتم‌ها و عنصرهای گرید را بسازید. مثلا، با تنظیم کانتینر روی خاصیت Display در گرید یا in-line Grid می‌توانید این خاصیت را اجرا کنید.

ویژگی Grid-template-column

این ویژگی برای تنظیم عرض هر ستون استفاده می‌شود. به‌علاوه، شما می‌توانید با این ویژگی تعداد ستون‌های هر پروژه را مشخص کنید. برای اجرای CSS Grid Column به Grid-template Column احتیاج دارید.

ویژگی Grid-template-row

این ویژگی برای تنظیم ارتفاع هر ستون است. شما می‌توانید با استفاده از Grid-template-row تعداد ردیف‌های پروژه را هم مشخص کنید.

ویژگی Column-gap

ویژگی Column-gap برای تنظیم یک فاصله یا فضای خالی بین ستون‌ها در یک Container است. همچنین، امکان تنظیم یک مقدار مشخص برای Column-gap property وجود دارد.

ویژگی Row-gap

خاصیت Row-gap برای تنظیم یک فاصله مشخص بین ردیف‌ها در Container است. مثلا شما می‌توانید مقدار ۵۰px را به این ویژگی اختصاص دهید.

ویژگی Justify-content

خاصیت Justify-content برای تنظیم مکان آیتم‌ها (ردیف‌ها و ستون‌ها) در کانتینر استفاده می‌شود. به‌علاوه، Justify-content نحوه قرارگیری فضای خالی اطراف آیتم‌ها را نشان می‌دهد. موارد زیر مقادیر احتمالی این ویژگی هستند:

• Start
• End
• Center
• Space-around
• Space-between
• Space-evenly

مزیت‌های استفاده از CSS Grid

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

تفاوت CSS Grid و Flexbox چیست؟

یکی از سوال‌های اصلی برنامه‌نویس‌ها، تفاوت سی اس اس گرید و فلکس باکس است. مهم‌ترین تفاوت این دو ماژول، Dimension یا بعد آن‌هاست. در صفحه‌های وب، عناصر به صورت تک بعدی یا دو بعدی تعریف می‌شوند، اما منوی بیشتر سایت‌ها به صورت یک عنصر تک‌بعدی است و در یک جهت قرار گرفته است. اگر می‌خواهید عنصرهای صفحه وب را در یک جهت خاص تعریف کنید، بهتر است از Flexbox استفاده کنید. فلکس باکس کد کمتری دارد و با کیفیت بهتری این کار را انجام می‌دهد.

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

نکته مهم این است که ماژول‌های CSS Grid و Flexbox نسبت به هم برتری ندارند و در شرایط مختلفی استفاده می‌شوند. شما باید با توجه به نیاز خودتان از ماژول مناسب استفاده کنید. همچنین، امکان استفاده از CSS Grid و Flexbox به صورت همزمان هم وجود دارد. با این کار، قالب‌بندی و ایجاد Layout راحت‌تر انجام می‌شود. کتابخانه Grid-Flexbox هم در اختیار شماست. اگر می‌خواهید ترازبندی Flexbox و CSS Grid را با هم مقایسه کنید، ما سایت Alignment Cheatsheet را معرفی می‌‌کنیم. در این سایت، شباهت‌ها و تفاوت‌های دو ماژول همراه با تصویر و مثال‌های متنوع وجود دارد.

کاربردهای CSS Grid

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

سخن آخر

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

منابع:
www.freecodecamp.org | ۷learn.com