columns-*

تخطيط الأعمدة columns-*

يوزّع محتوى حاوية على عدّة أعمدة تلقائيًّا بأسلوب الصحف والمجلّات، بدل استخدام flex أو grid.

columns خاصّية CSS اختصار توزّع أبناء عنصر واحد على عدد أعمدة محدّد (columns-3) أو حسب عرض مثالي لكل عمود (columns-xs يعني كل عمود بعرض تقريبي 20rem وعدد الأعمدة يتكيّف تلقائيًّا). يختلف جوهريًّا عن grid: لا تتحكّم بموضع كل عنصر بدقّة، بل يتدفّق المحتوى من عمود إلى التالي تلقائيًّا كما في الصحف الورقية.

الاستخدام الأشيع: قوائم صور، مقالات طويلة، أو بطاقات بأحجام متفاوتة حيث لا تحتاج محاذاة صفّية دقيقة، فقط توزيعًا متوازنًا للمساحة.

الصياغة

class="columns-3 gap-8"     /* 3 أعمدة متساوية */
class="columns-xs gap-6"    /* عرض عمود مثالي ~20rem، العدد يتكيّف */

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<script src="https://cdn.tailwindcss.com"></script>
<div class="columns-3 gap-6 p-4">
  <div class="mb-4 rounded-lg bg-purple-100 p-6 text-center">1</div>
  <div class="mb-4 rounded-lg bg-cyan-100 p-10 text-center">2</div>
  <div class="mb-4 rounded-lg bg-purple-100 p-4 text-center">3</div>
  <div class="mb-4 rounded-lg bg-cyan-100 p-8 text-center">4</div>
</div>

النتيجة المباشرة:

أهم القيم

القيمة	الوظيفة
columns-<n>	عدد أعمدة ثابت (columns-2, columns-3, ...)
columns-xs..7xl	عرض عمود مثالي، والعدد يتكيّف تلقائيًّا مع المساحة
columns-auto	القيمة الافتراضية — عمود واحد

💡 نصائح عملية

أضِف gap-* للتحكّم بالمسافة بين الأعمدة بدل الاعتماد على الهامش الافتراضي للمتصفح
استخدم break-inside-avoid على عنصر معيّن لمنع انقسامه بين عمودين

⚠️ أخطاء شائعة

توقّع أن columns تعطي محاذاة صفّية كـ grid — العناصر تتدفّق عموديًّا داخل كل عمود لا أفقيًّا عبر الأعمدة
استخدامها لتخطيط بطاقات يحتاج ترتيبًا أفقيًّا دقيقًا — الخيار الصحيح هناك grid

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار TAILWIND الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs