CSS - Multiple Columns الأعمدة المتعددة

CSS - الأعمدة المتعددة (Multiple Columns)

🔸 تتيح خصائص CSS3 تقسيم المحتوى داخل عنصر ما إلى أعمدة متعددة بشكل مشابه لتنسيق الجرائد. مفيدة في عرض النصوص الطويلة بشكل أكثر قابلية للقراءة.

🔹 الخصائص الأساسية للأعمدة المتعددة

• column-count: عدد الأعمدة التي سيتم تقسيم النص عليها.
• column-gap: المسافة بين الأعمدة.
• column-rule: خط يفصل بين الأعمدة (مشابه للحدود).

🧪 مثال بسيط: استخدام column-count

<div class="multicol">
  هذا نص طويل سيتم تقسيمه تلقائيًا إلى عدة أعمدة باستخدام CSS.
  يمكنك وضع ما شئت من الفقرات أو المحتوى داخل هذا الصندوق.
</div>

.multicol {
  column-count: 3;
}

📌 هذا الكود يقسم النص إلى 3 أعمدة تلقائيًا.

🧪 إضافة مسافة بين الأعمدة

.multicol {
  column-count: 3;
  column-gap: 40px;
}

📌 column-gap تُحدد مقدار التباعد بين الأعمدة.

🧪 إضافة خط فاصل بين الأعمدة

.multicol {
  column-count: 3;
  column-gap: 40px;
  column-rule: 1px solid #ccc;
}

📌 column-rule تضيف خطًا يفصل بين كل عمود وآخر.

🧪 تحديد عرض العمود بدلاً من العدد

.multicol {
  column-width: 200px;
}

📌 المتصفح يحدد عدد الأعمدة تلقائيًا بناءً على العرض المتاح والعرض المحدد لكل عمود.

📌 ملاحظات مهمة

• يمكنك الجمع بين column-count و column-width، والمتصفح سيختار الأنسب.
• الأعمدة لا تعمل بشكل جيد مع المحتوى المعقد مثل الجداول أو الصور الكبيرة.
• الأعمدة المتعددة تُستخدم غالبًا في النصوص والمقالات أو لتصميم مشابه للمجلات.