این دو کلاس مشخص می‌کنن که یک آیتم Grid از کدوم خط شبکه شروع بشه و کجا تموم بشه.

1) col-start

مشخص می‌کنه یک المان از کدوم خط شبکه شروع بشه:

<div class="grid grid-cols-4 gap-4">
  <div class="bg-coral col-start-2">شروع از ستون 2</div>
</div>

🔹 در این مثال آیتم به جای اینکه توی ستون اول قرار بگیره، از ستون 2 شروع میشه.

2) col-end

مشخص می‌کنه یک المان تا کدوم خط ادامه پیدا کنه:

<div class="grid grid-cols-4 gap-4">
  <div class="bg-coral col-start-1 col-end-3">از ستون 1 تا قبل از 3</div>
</div>

🔹 یعنی آیتم از ستون 1 شروع میشه و قبل از خط 3 تموم میشه → در واقع ستون 1 و 2 رو می‌گیره.

3) col-span (روش ساده‌تر)

در Tailwind یه شورتکات هست به اسم col-span که کار col-start + col-end رو راحت‌تر می‌کنه:

<div class="grid grid-cols-4 gap-4">
  <div class="bg-coral col-span-2">دو ستون رو می‌گیره</div>
</div>

4) مقدار auto

اگر نخوای دستی مشخص کنی، می‌تونی col-auto بزنی که مرورگر خودش بچینه:

<div class="grid grid-cols-4 gap-4">
  <div class="bg-coral col-start-auto col-end-auto">خودکار</div>
</div>

5) استفاده کاربردی (Layout پیشرفته)

مثلا بخوای یه کارت بزرگ کل عرض Grid رو بگیره:

<div class="grid grid-cols-4 gap-4">
  <div class="bg-coral col-start-1 col-end-5">هدر (کل عرض)</div>
  <div class="bg-coral col-span-2">سایدبار</div>
  <div class="bg-coral col-span-2">محتوا</div>
</div>

✅ خلاصه:

• col-start-n = نقطه شروع ستون

• col-end-n = نقطه پایان ستون

• col-span-n = ترکیب کوتاه‌تر (چند ستون گرفتن)

• col-auto = مرورگر تصمیم می‌گیره