ارزیابی چیست؟ کاربرد Grid Layout در طراحی سایت با CSS

ارزیابی چیست؟

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

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

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

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

نحوه ایجاد گرید در CSS

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

منظور از فریم های شبکه چیست؟

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

طراحی گالری شبکه ای

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

منظور از فلکس باکس در گرید چیست؟

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

تفاوت بین CSS Grid و Flex Box

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

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

موقعیت یابی با استفاده از ناحیه های شبکه-الگو

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

تفاوت بین Bootstrap و Grid چیست؟

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

خلاصه مقاله ارزیابی چیست؟

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

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