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

CSS Grid

Grid Columns و Gap

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

محتوای درس Grid Columns و Gap

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

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

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

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

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

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

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

index.html
<div class="grid grid-cols-12 gap-4">
  <section class="col-span-12 rounded-xl bg-slate-100 p-5 lg:col-span-8">Main</section>
  <aside class="col-span-12 rounded-xl bg-slate-900 p-5 text-white lg:col-span-4">Side</aside>
</div>

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

Layout دوازده ستونه که در Desktop به 8/4 تقسیم می‌شود.

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

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

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

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

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