TDS از کوچک به بزرگ طراحی می‌شود (mobile-first). چیدمان با نقطه‌های شکست توکنی و ستون‌های خودتنظیم کار می‌کند؛ هدف این است که هر صفحه از موبایل کوچک تا دسکتاپ بدون نوار افقی و بدون بریدگی خوانا بماند.
مقادیر مستقیماً از توکن‌های لایهٔ Raw خوانده می‌شوند. در CSS همین عدد را در @media بنویسید؛ check:tokens آن را بررسی می‌کند.
| نام | توکن | حداقل عرض |
|---|---|---|
| sm | کپی کد | کپی کد |
| md | کپی کد | کپی کد |
| lg | کپی کد | کپی کد |
| xl | کپی کد | کپی کد |
| 2xl | کپی کد | کپی کد |
نقطهٔ شکست فعلی: کپی کد
عرض قاب را عوض کنید. کارت‌ها با عرض قاب خودشان ستون عوض می‌کنند؛ قاب از همان ستون‌های خودتنظیم استفاده می‌کند.
حداقل ۱۸rem در هر ستون
ستون‌ها خودشان جا می‌شوند
بدون نقطهٔ شکست دستی
سه الگوی تکرارشونده در TDS.
دسکتاپ: کپی کد · تبلت: کپی کد · موبایل: کپی کد. کامپوننت کپی کد این گذار را خودکار انجام می‌دهد.
دسکتاپ و تبلت: کپی کد یا کپی کد. موبایل: نوار پایین، و Dock شیشه‌ای ثابت در پایین صفحه در همهٔ اندازه‌ها.
در عرض کم، هر ردیف به کارت تبدیل می‌شود و برچسب ستون کنار مقدار می‌آید (کپی کد).
الگوی ستون‌های خودتنظیم بدون نقطهٔ شکست:
<Grid gap={4} min={18}> {items.map((item) => <Card key={item.id} {...item} />)}</Grid>