جاري التحميل...

الأعمدة المتعددة في CSS

Optional Advanced غطّى للتو صور الرش — ورقة واحدة وقطع كثيرة. هذه الجلسة أداة اختيارية أخرى: أعمدة متعددة. فكّر في صحيفة، لا في شريط أدوات. تطلب من CSS أن يصبّ مقالاً طويلاً في مسارين أو ثلاثة عموديين. أنت لا تضع بطاقات مستقلة على Grid.

الجواب المباشر

تخطيط الأعمدة المتعددة في CSS يقسم كتلة محتوى متدفقة — غالباً نصاً طويلاً — إلى أعمدة بأسلوب الصحيفة. تحدّد العدد (column-count)، عرضاً مريحاً للعمود (column-width)، المزراب (column-gap)، وخطاً عمودياً اختيارياً (column-rule). النص والقوائم يملآن العمود الأول ثم التالي. استخدمه لـالنص الطويل. للقوائم والبطاقات وهيكل الصفحة ابقَ مع Flexbox أو Grid حتى تبقى كل علبة وحدة كاملة.

لماذا وُجدت الأعمدة

السطر الطويل صعب القراءة. حلّت المجلات ذلك بعدة أعمدة أقصر في الصفحة. نسخت CSS الفكرة للويب: عنصر واحد، تيار نص واحد، التفاف تلقائي إلى أعمدة. هذا غير Flexbox (صف أو عمود من عناصر) وغير Grid (خريطة ثنائية البعد للمناطق). الأعمدة المتعددة أداة تقطيع — قد يقسم المتصفح فقرة عند حد العمود ما لم تمنعه.

العدد: «أريد ثلاثة أعمدة»

column-count يطلب رقماً. يقسم المتصفح عرض الحاوية على ذلك العدد (ناقص الفجوات):

Newspaper article with column-count

css

.article {
column-count: 3;
max-width: 60rem;
}

على مقال عريض ترى ثلاثة مسارات. على هاتف ضيق تصبح ثلاثة أعمدة نحيلة غير مقروءة — اقرنها باستعلام وسائط، أو فضّل column-width حتى ينخفض العدد عند ضيق المساحة.

العرض: «كل عمود تقريباً بهذا الاتساع»

column-width تلميح، لا قفص بكسل مقفل. ينشئ المتصفح أكبر عدد ممكن من أعمدة بعرض لا يقل عن ذلك:

Flexible columns with column-width

css

.article {
column-width: 16rem;
max-width: 60rem;
}

إن كان الصندوق نحو 48rem مع الفجوات فقد ترى ثلاثة أعمدة؛ إن ضاق فقد ترى اثنين ثم واحداً. هذا أهدأ عادةً من column-count: 3 ثابت على كل عرض. يمكن الجمع: العدد سقف، والعرض حد أدنى مريح. الاختصار columns هو العرض ثم العدد، مثلاً columns: 16rem 3.

الفجوة والخط

الأعمدة تحتاج نفساً. column-gap هو المزراب. column-rule يرسم خطاً رفيعاً فيه (عرض ونمط ولون — يشبه الحدود، لكنه لا يأخذ مساحة تخطيط إضافية كحد الصندوق):

Gap and rule between columns

css

.article {
column-width: 16rem;
column-gap: 2rem;
column-rule: 1px solid #cbd5e1;
}

توجد اختصارات (column-rule-width وcolumn-rule-style وcolumn-rule-color). اجعل الخط هادئاً؛ فاصل صحيفة لا نظام تصميم ثانٍ.

عنوان يمتد على الكل

العنوان غالباً يجب أن يجلس على العرض كاملاً ثم تبدأ الأعمدة تحته. column-span: all على ابن يفعل ذلك:

Heading that spans all columns

css

.article h2 {
column-span: all;
margin: 0 0 1rem;
}

.article {
column-count: 2;
column-gap: 1.5rem;
}

الاستعمال اليومي هو none وall. الامتداد للعنوان أو صورة بارزة أو تنبيه — لا لكل فقرة.

لا تُشطر العلب

بطاقة أو شكل مع تعليق أو اقتباس يبدو مكسوراً إن قطع حد العمود منتصفه. break-inside: avoid يطلب من المتصفح إبقاء الصندوق في عمود واحد حين يستطيع:

Keep a card from splitting across columns

css

.article figure,
.article .callout {
break-inside: avoid;
margin: 0 0 1rem;
}

مفيد أيضاً: break-before / break-after في تدفقات شبه مطبوعة، وpage-break-inside: avoid احتياطياً في متصفحات قديمة. لن تربح كل معركة — الصناديق العالية جداً تفيض — لكن الهدف المعتاد بقاء التعليق مع الصورة. column-fill: balance (غالباً الافتراضي) يوازن ارتفاعات الأعمدة؛ auto يملأ العمود الأول أولاً (أكثر شبهًا بقفزة الصحيفة).

الأعمدة مقابل Flex مقابل Grid

📊 Multi-column vs Flex vs Grid

Tool	Job	Poor fit
Multi-column (`column-*`)	Long article, glossary, name list that should read like a newspaper	Card galleries, nav bars, full page shells
Flexbox	One-dimensional rows/columns of whole items (toolbar, chips, simple stacks)	Pouring a novel into three text streams
Grid	Two-dimensional page or component map (header / main / aside)	Replacing `column-count` on a `<p>` soup
Sprites (`background-position`)	Decorative icon tiles on a sheet	Laying out article text

وحدات Flexbox وGrid علّمت وضع العناصر. الأعمدة المتعددة لا تعطيك justify-content ولا مناطق مسماة. إنها تدفق تيار واحد. إن وجب أن يبقى كل ابن مستطيلاً يمكن النقر عليه، استخدم Flex أو Grid.

هيكل الصفحة يبقى Flex أو Grid

لا تحوّل الموقع كله إلى column-count: 3. الرأس والقائمة ومجموعة البطاقات تريد علباً كاملة:

Page chrome stays Flex or Grid

css

.site-header {
display: flex;
justify-content: space-between;
align-items: center;
}

.card-deck {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: 1rem;
}

.prose {
column-width: 18rem;
column-gap: 1.75rem;
}

.prose يجوز أن يكون متعدد الأعمدة. .card-deck لا. الخلط على العنصر نفسه يقطع الأشكال ويضع الأزرار في المسار الخطأ.

الشاشات الضيقة وترتيب القراءة

إن صارت الأعمدة أضيق من سطر مريح (نحو 12–16rem من النص) انزل إلى عمود واحد. قارئات الشاشة ولوحة المفاتيح تتبعان ترتيب المستند، لا «نزولاً في عمود ثم التالي» كمسح بصري — مناسب لمقال، محرج إن زيّفت لوحة أدوات غير مترابطة بالأعمدة. في اللغات من اليمين لليسار تُملأ الأعمدة حسب وضع الكتابة؛ والخط يبقى في المزراب.

جرّبها بنفسك

غلّف فقرات في .prose وضع column-count: 2 مع column-gap.
بدّل إلى column-width: 16rem وغيّر حجم النافذة — راقب تغيّر العدد.
أضف column-rule: 1px solid برمادي هادئ.
ضع <h2> مع column-span: all.
غلّف شكلاً بـ break-inside: avoid. ثم جرّب نفس CSS على شبكة بطاقات لترى لماذا Flex/Grid أهدأ هناك.

أخطاء شائعة

استخدام الأعمدة كـمعرض بطاقات أو تخطيط صفحة كاملة
فرض column-count: 3 على الهاتف حتى يصير السطر ثلاث كلمات
نسيان column-gap فتلصق المسارات
انقسام الصور والتعليقات عند حد العمود
معاملة الأعمدة كـ Flex: لا flex-grow لتيار عمود
الخلط مع صور الرش — الرش يقص الخلفية؛ الأعمدة تقطع النص

الملخص

الأعمدة المتعددة تصب تياراً واحداً في أعمدة صحيفة
column-count رقم؛ column-width حد أدنى مريح؛ يمكن الجمع
column-gap وcolumn-rule يزيّنان المزراب؛ العناوين بـ column-span: all
break-inside: avoid يبقي الأشكال والتنبيهات كاملة حين يمكن
Flex وGrid ما زالا يملكان هيكل الصفحة ومجموعات البطاقات
Optional Advanced يتابع بعدها بـ الأقنعة (masking)

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓

الأسئلة

🎯

70%

للنجاح

♾️

∞

الوقت

🔄

∞

المحاولات

📝 التعليمات

اقرأ كل سؤال بعناية
اختر أفضل إجابة لكل سؤال
يمكنك إعادة الاختبار عدة مرات كما تريد
سيتم عرض تقدمك في الأعلى

اللغة