گرید و نقاط شکست
چیدمان صفحات در ساختار گرید شکل می‌گیرد و با وجود نقاط شکست، در تمام دستگاه‌ها رفتاری منعطف و پیش‌بینی‌پذیر خواهد داشت.
گرید واکنش‌گرا (Responsive Grid)
گرید چیدمانی دوبُعدی و یکی از اجزاء اصلی در دیزاین سیستم برای نمایش موقعیت هماهنگ و پیوستگی عناصر صفحه است. گرید واکنش‌گرا به‌شکلی پویا چیدمان را براساس اندازهٔ صفحهنمایش تغییر می‌دهد. تراز کردن عناصر با گرید صفحه باعث می‌شود محتوای اصلی در مرکز صفحه قرار گیرد و تمرکز کاربر مخدوش نشود. رفتار گرید از رفتار اجزاء تشکیل‌دهندهٔ آن تبعیت می‌کند.
اجزای تشکیل‌دهندهٔ گرید
گرید از ۳ بخش اصلی تشکیل شده است:
۱. ستون (Column): ستون‌ها گریدها را می‌سازند و تعداد آن‌ها در سنّت ۱۲ عدد است. عرض هر ستون با توجه به نقاط شکست تغییر می‌کند.
۲. گاتر (Gutter): فاصلهٔ خالی و ثابت بین ستون‌ها را گاتر می‌گویند. در سنّت عرض هر گاتر 16px است.
۳. حاشیه (Margin): حاشیه فضای بیرونی گرید است و در سنّت با توجه به نقاط شکست، عرض حاشیه‌ها می‌تواند برابر یا بزرگ‌تر از گاتر باشد.
انواع گریدهای واکنش‌گرا
گرید ثابت (Fixed Grid)
به‌دلیل داشتن عرض ثابت در نقاط شکست مختلف و کنترل بیشتر روی چیدمان صفحه، از این گرید در طراحی و توسعهٔ صفحات ساده و پیش‌بینی‌پذیر استفاده می‌شود. همچنین استفاده از این گرید خوانایی محتوای صفحه را افزایش می‌دهد.
گرید سیّال (Fluid Grid)
به‌دلیل استفادهٔ کامل از عرض صفحه، از این گرید در طراحی و توسعهٔ صفحات پیچیده استفاده می‌شود. در گرید سیال عرض ستون‌ها دائماً در نقاط شکست مختلف کم یا زیاد می‌شود و اندازهٔ محتوا براساس آن تغییر می‌کند.
کاربرد ستون‌ها در گریدهای واکنش‌گرا
گسترهٔ ستون‌ها (Column Spanning)
در هر بخش از چیدمان با توجه به ساختار و چینش صفحه، می‌توان تعداد ستون‌های هر جزء آن بخش را گسترش داد. این اجزاء به کمک گاترها از هم جدا می‌شوند. در نقاط شکست می‌توان تعداد ستون‌ها را تغییر داد.
اُفست (Offset)
لازم نیست همیشه محتوای صفحه در ۱۲ ستون قرار بگیرد و گاهی اوقات می‌تواند فضای کوچک‌تری را در مرکز صفحه اشغال کند. برای مثال محتوا می‌تواند در ۸ ستون وسط قرار بگیرد و دو ستون در اطراف آن خالی باشد.
نقاط شکست (Breakpoints)
در نقاط شکست، طراحی صفحه و نحوهٔ نمایش محتوای آن تغییر می‌کند تا بهینه‌ترین چیدمان را برای بهترین تجربهٔ کاربر ارائه دهد. عرض ستون‌ها، گاترها و حاشیه‌ها در نقاط شکست برای هر صفحهنمایش متفاوت است. در سنّت ۶ نقطهٔ شکست وجود دارد.
| بازه | نام بازه | عرض گرید ثابت |
|---|---|---|
| 519 - 320 | xxs | 100% |
| 520 - 767 | xs | 100% |
| 768 - 959 | sm | 100% |
| 960 - 1023 | md | 768px |
| 1024 - 1365 | lg | 960px |
| ≥ 1366 | xlg | 1184px |
| ||
رفتار
در راهنمای زیر رفتار گریدهای واکنش‌گرا در کاربردهای مختلف دیزاین توضیح داده شده است.