لوگوی توپُر دیزاین سیستم سنّت

گرید و نقاط‌ شکست

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

گرید واکنش‌گرا (Responsive Grid)

گرید چیدمانی دوبُعدی و یکی از اجزاء اصلی در دیزاین سیستم برای نمایش موقعیت هماهنگ و پیوستگی عناصر صفحه است. گرید واکنش‌گرا به‌شکلی پویا چیدمان را براساس اندازهٔ صفحه‌‌نمایش تغییر می‌دهد. تراز کردن عناصر با گرید صفحه باعث می‌شود محتوای اصلی در مرکز صفحه قرار گیرد و تمرکز کاربر مخدوش نشود. رفتار گرید از رفتار اجزاء تشکیل‌دهندهٔ آن تبعیت می‌کند. ### اجزای تشکیل‌دهندهٔ گرید گرید از ۳ بخش اصلی تشکیل شده است:
**۱. ستون (Column):** ستون‌ها گریدها را می‌سازند و تعداد آن‌ها در سنّت ۱۲ عدد است. عرض هر ستون با توجه به نقاط شکست تغییر می‌کند.
**۲. گاتر (Gutter):** فاصلهٔ خالی و ثابت بین ستون‌ها را گاتر می‌گویند. در سنّت عرض هر گاتر 16px است.
**۳. حاشیه (Margin):** حاشیه فضای بیرونی گرید است و در سنّت با توجه به نقاط شکست، عرض حاشیه‌ها می‌تواند برابر یا بزرگ‌تر از گاتر باشد.

انواع گریدهای واکنش‌گرا

### گرید ثابت (Fixed Grid) به‌دلیل داشتن عرض ثابت در نقاط شکست مختلف و کنترل بیشتر روی چیدمان صفحه، از این گرید در طراحی و توسعهٔ صفحات ساده‌ و پیش‌بینی‌پذیر استفاده می‌شود. همچنین استفاده از این گرید خوانایی محتوای صفحه را افزایش می‌دهد.
### گرید سیّال (Fluid Grid) به‌دلیل استفادهٔ کامل از عرض صفحه، از این گرید در طراحی و توسعهٔ صفحات پیچیده استفاده می‌شود. در گرید سیال عرض ستون‌ها دائماً در نقاط شکست مختلف کم یا زیاد می‌شود و اندازهٔ محتوا براساس آن تغییر می‌کند.

کاربرد ستون‌ها در گرید‌های واکنش‌گرا

### گسترهٔ ستون‌ها (Column Spanning) در هر بخش از چیدمان با توجه به ساختار و چینش صفحه، می‌توان تعداد ستون‌های هر جزء آن بخش را گسترش داد. این اجزاء به کمک گاترها از هم جدا می‌شوند. در نقاط شکست می‌توان تعداد ستون‌ها را تغییر داد.
### اُفست (Offset) لازم نیست همیشه محتوای صفحه در ۱۲ ستون قرار بگیرد و گاهی اوقات می‌تواند فضای کوچک‌تری را در مرکز صفحه اشغال کند. برای مثال محتوا می‌تواند در ۸ ستون وسط قرار بگیرد و دو ستون در اطراف آن خالی باشد.
### نقاط شکست (Breakpoints) در نقاط شکست، طراحی صفحه و نحوهٔ نمایش محتوای آن تغییر می‌کند تا بهینه‌ترین چیدمان را برای بهترین تجربهٔ کاربر ارائه دهد. عرض ستون‌ها، گاترها و حاشیه‌ها در نقاط شکست برای هر صفحه‌نمایش متفاوت است. در سنّت ۶ نقطهٔ شکست وجود دارد.
نقاط شکست دیزاین سیستم سنّت
بازهنام بازهعرض گرید ثابت
320 - 519xxs100%
520 - 767xs100%
768 - 959sm100%
960 - 1023md768px
1024 - 1365lg960px
≥ 1366xlg1184px
  • تعداد ستون‌های سنّت در هر نقطهٔ شکست ۱۲ عدد است.
  • عرض هر گاتر سنّت مقدار ثابت 16px است. 8px از راست و 8px از چپ.
  • چیدمان صفحه در هر بازه، رفتار مقدار کمینهٔ نقطه‌ شکست را در آن بازه ارث می‌برد.

رفتار

در راهنمای زیر رفتار گریدهای واکنش‌گرا در کاربردهای مختلف دیزاین توضیح داده شده است.
نادرست

در گرید واکنش‌گرا لازم نیست تمام کامپوننت‌ها با ستون‌ها هم‌تراز باشند.

نادرست

گاترها فقط برای فاصله‌گذاری بین ستون‌ها و ایجاد فضای خالی کاربرد دارند. چیدمان را از ابتدای هر ستون شروع کنید و نه از ابتدای هر گاتر.

درست

بخش‌هایی با عرض ثابت (مانند منوی کناری) در ستون‌های گرید واکنش‌گرا قرار نمی گیرند و عرضشان تغییر نمی‌کند.