گرید (Grid)
سیستم شبکه‌ای از Tailwind CSS، برای جزئیات بیشتر استفاده به مستندات رسمی مراجعه کنید.
الگوی ستون‌های گرید (GridTemplateColumn)
از ابزارهای grid-cols-{n} استفاده
کنید تا شبکه‌هایی با n ستون با
اندازه‌های یکسان ایجاد کنید.
شروع / پایان ستون گرید (GridColumnStartEnd)
از ابزارهای grid-cols-{n} استفاده
کنید تا شبکه‌هایی با n ستون با
اندازه‌های یکسان ایجاد کنید.
شروع / پایان خط ستون (ColumnStartEndLine)
از ابزارهای col-start-{n} و
col-end-{n} برای تعیین نقطه شروع یا
پایان المان در خطوط شبکه nth استفاده
کنید. این‌ها همچنین می‌توانند با ابزارهای
col-span-{n} ترکیب شوند تا یک تعداد
خاص از ستون‌ها را در بر بگیرند.
الگوی ردیف‌های گرید (GridTemplateRows)
از ابزارهای grid-rows-{n} برای
ایجاد شبکه‌هایی با n ردیف با اندازه‌های
یکسان استفاده کنید.
شروع / پایان خط ردیف (GridRowStartEndLine)
از ابزارهای row-start-{n} و
row-end-{n} برای ایجاد شروع یا
پایان عنصر در خط nام شبکه استفاده کنید.
این‌ها همچنین می‌توانند با ابزارهای
row-span-{n} ترکیب شوند تا تعداد
خاصی از ردیف‌ها را پوشش دهند.
توجه داشته باشید که خطوط شبکه CSS از عدد 1 شروع می‌شوند، نه 0، بنابراین یک عنصر با ارتفاع کامل در یک شبکه سه ردیفه از خط 1 شروع می‌شود و در خط 4 پایان می‌یابد.
شروع / پایان ردیف گرید (GridRowStartEnd)
از ابزارهای row-span-{n} برای ایجاد
گسترش عنصر در n ردیف استفاده کنید.
جریان خودکار گرید
از ابزارهای grid-flow-{keyword} برای
کنترل نحوه کارکرد الگوریتم قرارگیری خودکار در یک
طرح شبکه استفاده کنید.
ستون‌های خودکار گرید
از ابزارهای auto-cols-{size} برای
کنترل اندازه ستون‌های شبکه‌ای که به‌صورت ضمنی
ایجاد می‌شوند استفاده کنید.
ارتفاع خودکار ردیف‌های شبکه
از ابزارهای auto-rows-{size} برای
کنترل اندازه ردیف‌های شبکه‌ای که به‌صورت ضمنی
ایجاد می‌شوند استفاده کنید.
هاور و فوکوس
تیلویند به شما اجازه می‌دهد که کلاس‌های ابزاری را
در وضعیت‌های مختلف به صورت شرطی با استفاده از
اصلاح‌کننده‌های متغیر اعمال کنید. به عنوان مثال،
از hover:{class} برای اعمال کلاس
{class} تنها در حالت هاور استفاده
کنید.
نقاط و رشته‌های رسانه
همچنین می‌توانید از اصلاح‌کننده‌های متغیر برای
هدف‌گیری از پرس‌وجوهای رسانه‌ای مانند نقاط شکست
پاسخگو، حالت تاریک، ترجیح کاهش حرکت، و غیره
استفاده کنید. به عنوان مثال، از
md:{class} برای اعمال کلاس
{class} فقط در اندازه‌گیری متوسط و
بالاتر استفاده کنید.
جدول محتویات
- الگوی ستون‌های گرید (GridTemplateColumn)
- شروع / پایان ستون گرید (GridColumnStartEnd)
- شروع / پایان خط ستون (ColumnStartEndLine)
- الگوی ردیف‌های گرید (GridTemplateRows)
- شروع / پایان خط ردیف (GridRowStartEndLine)
- شروع / پایان ردیف گرید (GridRowStartEnd)
- جریان خودکار گرید
- ستون‌های خودکار گرید
- ردیف‌های خودکار گرید
- هاور و فوکوس
- نقاط و رشته‌های رسانه