گرید چیست؟

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

دوره معرفی شده در ویدئو

آموزش پیشنهادی

دوره رایگان آموزش CSS Grid طراحی گالری شبکه‌‎ای با گرید در CSS

اهمیت آموزش CSS Grid آموزش CSS Grid یکی از مباحث مهم در برنامه نویسی وب برای طراحی چیدمان های شبکه ای در وبسایت هایی که با HTML و CSS پیاده سازی میکنیم، یک نیاز ضروری خواهد بود. گرید در CSS یک سیستم چیدمان دو بعدی برای طراحی صفحات وب می باشد و به شما این امکان را می دهد که ردیف ها و ستون ها را از یکدیگر جدا کنید. […]

مشاهده دوره

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

همانطور که عنوان شد، CSS Grid در واقع یک خصوصیت بوده که به ما اجازه شبکه بندی کردن صفحه را میدهد. یعنی ما قادر خواهیم بود تا عرض صفحه خود را به تعداد مشخصی تقسیم بندی کنیم. مثلا میتوانیم عرض صفحه سایت را به 12 قسمت مساوی تقسیم کرده و مطمئن شویم که در ابعاد مختلف، طرح ما درست نمایش داده خواهد شد. در حالت گرید ما میتوانیم تعداد و ابعاد ستون های خودمان را نیز مشخص و معین کنیم. مثلا تعیین کنیم که 3 ستون با ابعاد 200 پیکسل برای ما ایجاد شود.

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

طریقه ایجاد گرید در CSS

برای استفاده از گرید در CSS بایستی ابتدا یک Container برای خود در نظر بگیرید. فرض کنید شما قصد استفاده کردن از 20 تصویر برای گالری خود را دارید. پس باید در ابتدا یک Division به عنوان کانتینر ایجاد کرده و سپس 20 عدد div برای هر کدام از img های خود تعریف کنید. حال باید ویژگی display کانتینر را برابر با مقدار grid گذاشته و اینگونه تمام تصاویر شما قابلیت چیدمان شبکه ای را به ارث میبرند. سپس با استفاده از ویژگی های grid-template-columns و grid-template-rows قادر به مشخص کردن تعداد سطر و ستون مدنظر خود خواهید بود. به تصویر زیر دقت کنید :

منظور از فریمورک‌های گرید چیست

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

طراحی گالری در گرید

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

منظور از Flex Box در گرید چیست

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

تقاوت CSS Grid و Flex Box

تفاوت فلکس با گرید چیست؟ همانطور که عنوان شد، گرید یک ویژگی برای طراحی چیدمان های شبکه ای دو بعدی میباشد که متشکل از سطر و ستون هستند. اما Flex Box برای طراحی چیدمان های تک بعدی استفاده میشود. در Flex Box ما میتوانیم مشخص کنیم که تعدادی از آیتم های ما به صورت افقی یا عمودی کنار یکدیگر قرار بگیرند. پس دقت کنید که در اینجا یا باید عمودی را انتخاب کرد و یا حالت افقی. در واقع میتوان گفت که کمی دست ما بسته شده و امکانات برای ما محدود میشوند.

هر چند زمانی که بخواهیم یک سری از آیتم ها را در حالت افقی کنار یکدیگر بچینیم، قابلیت Flex Box بسیار کاربردی تر از گرید خواهد بود. به عنوان مثال در صفحه اصلی دانشجویار مشاهده میکنید که تعدادی باکس برای معرفی دوره‌ها طراحی شده و در حالت افقی کنار یکدیگر قرار گرفته اند. در اینجا زیاد جذاب نیست که ما از گرید استفاده کنیم. پس Flex Box در چنین مکانی بهترین انتخاب خواهد بود. اما برای ریسپانسیو کردن کل صفحه و یا پیاده سازی کردن گالری تصاویر، دیگر فلکس باکس کاربری نبوده و گرید میتواند بهترین عملکرد را ارائه کند.

مقاله پیشنهادی: فلکس باکس یا گرید

موقعیت‌یابی با استفاده از grid-template-areas

استفاده از ویژگی area در گرید این قابلیت را به ما میدهد تا اولا تعداد سطر و ستون صفحه را مشخص کرده و دوما برای هرکدام از نواعی مدنظر خود از یک نام استفاده کنیم. مثلا 6 ستون داریم و نام ستون اول و دوم و سوم خود را Test میگذاریم. حال کافیست تا به یکی از آیتم های درون Container ویژگی grid-area را اضافه کرده و مقدار آن را برابر با Test قرار دهیم. اینگونه خواهد شد که آیتم مدنظر ما سه ستون را اشغال میکند. چرا؟ چون سه ستون از 6 ستون موجود را در خصوصیت grid-template-areas برابر با مقدار Test در نظر گرفته ایم. پس با این ویژگی دست ما از همیشه باز تر خواهد بود.

تفاوت بوت استرپ با گرید چیست؟

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

جمع بندی مقاله “گرید چیست؟”

در مقاله “گرید چیست؟” فهمیدیم که گرید لی‌اوت یا همان Grid Layout یک ویژگی یا خصوصیت در زبان CSS میباشد که با استفاده از آن قادر به طراحی چیدمان های شبکه ای خواهیم بود. البته علاوه بر استفاده در طراحی شبکه ای، برای ریسپانسیو کردن و واکشنگرا بودن قالب نیز از ویژگی گرید در CSS استفاده میشود. گرید را میتوان یکی از کاربردی ترین ویژگی های CSS نامید که فریمورک های بزرگی نظیر Bootstrap و Tailwind CSS نیز بر پایه همین ویژگی پیاده سازی و ایجاد شده اند. این خصوصیت را در دوره آموزش CSS Grid به صورت کامل آموزش خواهیم داد.

با ثبت نظرات، پیشنهادات، انتقاد ها و همچنین سوال های خود درمورد مقاله گرید چیست؟ در بخش نظرات سایت، ما را در راستای بهبود کیفیت خدماتمان، یاری نمایید.