شبکه (Grid)

سیستم شبکه از Tailwind CSS، برای اطلاعات بیشتر به مستندات رسمی مراجعه کنید

قالب ستون‌ها (Grid Template Columns)

از ابزارهای grid-cols-{n} برای ایجاد شبکه‌هایی با n ستون با اندازه مساوی استفاده کنید.

شروع / پایان ستون (Grid Column Start / End)

از ابزارهای col-span-{n} برای گسترش یک عنصر به اندازه n ستون استفاده کنید.

شروع / پایان خط ستون (Grid Column Start / End Line)

از ابزارهای col-start-{n} و col-end-{n} برای تعیین مکان شروع یا پایان یک عنصر در خط nth شبکه استفاده کنید. این ابزارها همچنین می‌توانند با col-span-{n} ترکیب شوند تا تعداد خاصی از ستون‌ها را پوشش دهند.

توجه داشته باشید که خطوط شبکه CSS از 1 شروع می‌شوند نه از 0، بنابراین یک عنصر تمام عرض در شبکه 6 ستونی از خط 1 شروع و در خط 7 تمام می‌شود.

قالب ردیف‌ها (Grid Template Rows)

از ابزارهای grid-rows-{n} برای ایجاد شبکه‌هایی با n ردیف با اندازه مساوی استفاده کنید.

شروع / پایان خط ردیف (Grid Row Start / End Line)

از ابزارهای row-start-{n} و row-end-{n} برای تعیین مکان شروع یا پایان یک عنصر در خط nth ردیف شبکه استفاده کنید. این ابزارها همچنین می‌توانند با row-span-{n} ترکیب شوند تا تعداد خاصی از ردیف‌ها را پوشش دهند.


توجه داشته باشید که خطوط شبکه CSS از 1 شروع می‌شوند نه از 0، بنابراین یک عنصر تمام ارتفاع در شبکه 3 ردیفی از خط 1 شروع و در خط 4 تمام می‌شود.

شروع / پایان ردیف (Grid Row Start / End)

از ابزارهای row-span-{n} برای گسترش یک عنصر به اندازه n ردیف استفاده کنید.

جریان خودکار شبکه (Grid Auto Flow)

از ابزارهای grid-flow-{keyword} برای کنترل نحوه عملکرد الگوریتم قرارگیری خودکار برای چیدمان شبکه استفاده کنید.

ستون‌های خودکار شبکه (Grid Auto Columns)

از ابزارهای auto-cols-{size} برای کنترل اندازه ستون‌های به طور خودکار ایجاد شده در شبکه استفاده کنید.

ردیف‌های خودکار شبکه (Grid Auto Rows)

از ابزارهای auto-rows-{size} برای کنترل اندازه ردیف‌های به طور خودکار ایجاد شده در شبکه استفاده کنید.

حالت‌های Hover, Focus و سایر حالات

تایلویند به شما اجازه می‌دهد که کلاس‌های ابزاری را در حالات مختلف به طور مشروط اعمال کنید، به عنوان مثال از hover:{class} برای اعمال فقط {class} هنگام hover استفاده کنید.

نقاط شکست و media queries

شما همچنین می‌توانید از واریانت‌های مدیا برای هدف‌گذاری نقاط شکست واکنش‌گرا، حالت تاریک، prefers-reduced-motion و غیره استفاده کنید. به عنوان مثال، از md:{class} برای اعمال {class} تنها در اندازه صفحه‌های متوسط و بزرگتر استفاده کنید.