رابط کاربری چیزی است که هر کاربری هنگام دسترسی به سایت با آن تعامل دارد، و عملکرد بالا ، پاسخگو بودن و ظاهر جذاب رابط کاربری برای موفقیت یک وب سایت ضروری است.
ابزارهای متعددی وجود دارد که به تعیین چیدمان وب سایت و قرار دادن عناصر UI کمک می کند و بسیار مهم است که ابزار مناسب استفاده شود. در این مطلب قصد داریم تعریفی از ابزار طرح بندی گرید در CSS داشته باشیم.
گرید چیست؟
گرید یک ابزار قدرتمند است که امکان طرح بندی دوبعدی را فراهم میکند و برای کار بر روی چیدمان عناصر UI و بخش های یک صفحه وب استفاده می شود. استفاده از CSS Grid برای قرار دادن عناصر UI به موقعیت دقیق آنها کمک می کند که برای پیاده سازی طراحی واکنش گرای سایت مفید است. گرید از پیکسل برای ثابت کردن اندازه طرح ها استفاده میکند و به این دلیل به صفحه وب کمک می کند برای اندازه طرح بندی ها در صفحه ی نمایش دستگاه های مختلف مانند تلفن ، تبلت و دسکتاپ .
بنابرای گرید نقش مهمی در ایجاد طرح بندی صفحات وب دارد و یک ابزار کلیدی برای ایجاد نرم افزارهای سازگار در دستگاههای متفاوت است.
مرورگرها
گرید در همه مرورگرها مانند کروم، فایرفاکس به جز اینترنت اکسپلورر پشتیبانی میشود.
ویژگی های گرید
یک مثال ساده با استفاده از گرید
HTML Code
<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>
Make a grid container
.wrapper {
display: grid;
}
