اگر جهان اطراف خود را مشاهده کنیم، میبینیم که چرا باید از گریدها در اکثر جاها استفاده کنیم. زندگی ما پر از این گریدها هستند اما کسی چگونگی استفاده از آنها را به ما نیاموخته است. در این مطلب قرار است دربارهی گریدهای ریسپانسیو در طراحی وب صحبت کنیم.
ستونها — میتوان گفت اساسیترین موارد در گریدهای ریسپانسو، ستونها هستند و بقیه المانهای صفحه در تعدادی از این ستونها جا میشوند. به طور کلی، در یک دیزاینسیستم، با توجه به اندازه صفحه تعداد ستونها متغیر است. به طور مثال؛ ۱۲ ستون برای دسکتاپها، ۸ ستون برای تبلتها و ۴ ستون برای موبایلها در نظر گرفته میشود و همانطور که دیدید عرض ستونها در این سیستم تغییر نمیکند.
شیارها — همان فاصله بین ستونها هستند و رعایت این اندازه بسیار مهم است. یکی از مثالهای معمول در این باره، طراحی گالری عکسهاست. اگرچه در بعضی از دیزاینسیستمها این فاصله با توجه به اندازه صفحه، متغیر است اما در بیشتر موارد فاصله ثابت ترجیح داده میشود.
حاشیهی طرفین — که به عنوان شیارهای بیرونی نیز شناخته میشوند، فضای خالی بیرون از محتوای صفحه را شامل میشود. اصولا با افزایش اندازهی صفحه، این حاشیهها نیز افزایش مییابند. این حاشیهها در اسمارتفونها بین ۲۰ تا ۳۰ پیکسل و در تبلتها و دسکتاپها با توجه به اندازهی صفحه، متغیر است. چیزی که شما به عنوان حاشیهی طرفین انتخاب میکنید، کمترین فضای خالی است که هنگام کوچککردن مرورگر خود خواهید داشت. زمانی که اندازهی مرورگر را افزایش میدهید، تا breakpoint بعدی فضای خالی بیشتری وجود خوهد داشت.
در ادامهی این مقاله، برخی از راهنماهای اولیه در مورد گریدهای ریسپانسیو در طراحی وب را مشاهده خواهید کرد. lمقاله را در اینجا مطالعه کنید.
(زمان حدودی مطالعه: ۱۱ دقیقه)
