فصل 7 از 27 درس 2 از 2

CSS Grid

Auto Fit Pattern و Grid Responsive

بخشی از آموزش جامع Tailwind CSS

محتوای درس Auto Fit Pattern و Grid Responsive

Auto Fit Pattern و Grid Responsive را در این درس به‌صورت عملی بررسی می‌کنیم. هدف این است که علاوه بر شناخت Utilityها، دلیل انتخاب آن‌ها و روش ارزیابی نتیجه را نیز بدانید.

هدف و مفهوم اصلی

CSS Grid چیدمان دوبعدی را با ستون‌ها و ردیف‌ها مدیریت می‌کند. Grid دوازده‌ستونه برای Layout صفحه و Grid واکنش‌گرا برای فهرست کارت‌ها کاربردی است؛ تعداد ستون‌ها باید با فضای واقعی محتوا تغییر کند.

روش پیاده‌سازی

  1. Grid را ایجاد و تعداد ستون‌های پایه را برای موبایل تعیین کنید.
  2. Span هر بخش و Gap را مشخص کنید.
  3. در Breakpointهای بزرگ‌تر تعداد ستون‌ها یا Span را تغییر دهید.

نمونه قابل اجرا

نمونه زیر را در پروژه خود اجرا کنید، سپس هر Utility را جداگانه تغییر دهید تا اثر آن روی Layout و ظاهر مشخص شود.

index.html
<div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
  <div class="rounded-xl border p-4">1</div>
  <div class="rounded-xl border p-4">2</div>
  <div class="rounded-xl border p-4">3</div>
  <div class="rounded-xl border p-4">4</div>
</div>

خروجی مورد انتظار

یک ستون در موبایل، دو ستون در Tablet و چهار ستون در Desktop.

نکات مهم و خطاهای رایج

  • تعداد ستون زیاد در موبایل کارت‌ها را غیرقابل خواندن می‌کند.
  • ارتفاع ثابت برای محتوای متغیر باعث بریدگی می‌شود.

تمرین پیشنهادی

یک کارت پنجم اضافه کنید و رفتار ردیف آخر را در سه عرض بررسی کنید.

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