تخطيط متعدد الأعمدة

مقدمة في تخطيط CSS متعدد الأعمدة

توفر وحدة التخطيط متعدد الأعمدة في CSS طريقة قوية لتدفق المحتوى عبر أعمدة متعددة، على غرار التخطيطات القائمة على الأعمدة التي تراها في الصحف والمجلات والمجلات الأكاديمية. قبل وجود هذه الوحدة، كان إنشاء تخطيطات نصية حقيقية متعددة الأعمدة يتطلب حيلاً معقدة قائمة على التعويم، أو حلول JavaScript، أو تقسيم المحتوى يدوياً إلى عناصر حاوية منفصلة. تحل وحدة التخطيط متعدد الأعمدة هذا بأناقة من خلال السماح للمتصفح بتقسيم المحتوى تلقائياً إلى أعمدة بناءً على خصائص CSS بسيطة.

تم اقتراح التخطيط متعدد الأعمدة لأول مرة كوحدة CSS3 وتم دعمه في المتصفحات منذ أوائل عام 2010. على عكس Flexbox وGrid، وهما نظاما تخطيط عامان مصممان لترتيب عناصر مميزة، فإن التخطيط متعدد الأعمدة مصمم خصيصاً لتدفق المحتوى المستمر عبر الأعمدة. فكر فيه على أنه مكافئ CSS لكيفية تعامل معالج النصوص أو تطبيق النشر المكتبي مع تخطيطات الأعمدة -- يتدفق النص بشكل طبيعي من عمود إلى آخر، ويملأ كل عمود قبل الانتقال.

في هذا الدرس، سنستكشف كل جانب من جوانب التخطيط متعدد الأعمدة: كيفية إنشاء الأعمدة، والتحكم في حجمها وتباعدها، وإضافة فواصل مرئية بينها، وإدارة كيفية انكسار المحتوى عبر الأعمدة، وفهم متى يكون التخطيط متعدد الأعمدة هو الأداة المناسبة مقابل متى يجب استخدام Flexbox أو Grid بدلاً من ذلك.

إنشاء الأعمدة باستخدام column-count

أبسط طريقة لإنشاء تخطيط متعدد الأعمدة هي باستخدام خاصية column-count. تخبر هذه الخاصية المتصفح بالضبط بعدد الأعمدة التي يجب تقسيم المحتوى إليها. سيحسب المتصفح عرض كل عمود تلقائياً بناءً على المساحة المتاحة.

.newspaper-article {
    column-count: 3;
}

/* HTML هو مجرد حاوية عادية تحتوي على نص */
<div class="newspaper-article">
    <p>هذا نص توضيحي يمثل محتوى المقال. سيتم تقسيم هذا النص
    تلقائياً عبر ثلاثة أعمدة بواسطة المتصفح. لا تحتاج إلى
    تقسيم المحتوى يدوياً إلى أعمدة منفصلة.</p>
    <p>الفقرة الثانية تستمر في التدفق عبر الأعمدة بشكل
    طبيعي. عندما يمتلئ العمود الأول، ينتقل النص إلى
    أعلى العمود الثاني وهكذا.</p>
</div>

مع column-count: 3، يقسم المتصفح منطقة محتوى الحاوية إلى ثلاثة أعمدة متساوية العرض. يتدفق النص من أعلى العمود الأول إلى الأسفل، ثم يستمر في أعلى العمود الثاني، وهكذا. يتم إنشاء الأعمدة تلقائياً -- لا تحتاج إلى لف محتواك في عناصر أعمدة منفصلة.

تعيين عرض العمود باستخدام column-width

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

.responsive-text {
    column-width: 250px;
}

/* على حاوية بعرض 1000px:
   1000 / 250 = 4 أعمدة، كل منها ~250px عرضاً */

/* على حاوية بعرض 600px:
   600 / 250 = 2 عمودان، كل منهما ~300px عرضاً */

/* على حاوية بعرض 400px:
   400 / 250 = عمود واحد، عرض كامل */

هذا السلوك يجعل column-width متجاوبة بطبيعتها. مع تقلص نافذة العرض أو الحاوية، تتم إزالة الأعمدة بشكل طبيعي دون الحاجة إلى استعلامات الوسائط. لن يجعل المتصفح أبداً عموداً أضيق من column-width المحددة (ما لم تكن الحاوية نفسها أضيق من تلك القيمة). بدلاً من ذلك، يقلل عدد الأعمدة للحفاظ على سهولة القراءة.

خاصية الاختصار columns

تتيح لك خاصية الاختصار columns تعيين كل من column-width و column-count في إعلان واحد. يستخدم المتصفح أي قيد ينتج عدداً أقل من الأعمدة، مما يضمن أن الأعمدة لا تكون أبداً أضيق من العرض المحدد ولا أكثر عدداً من العدد المحدد.

/* تعيين العرض والعدد معاً */
.article {
    columns: 200px 3;
    /* مكافئ لـ:
       column-width: 200px;
       column-count: 3;
    */
}

/* تعيين عدد الأعمدة فقط */
.two-columns {
    columns: 2;
    /* مكافئ لـ:
       column-width: auto;
       column-count: 2;
    */
}

/* تعيين عرض العمود فقط */
.flexible-columns {
    columns: 300px;
    /* مكافئ لـ:
       column-width: 300px;
       column-count: auto;
    */
}

/* كلا القيمتين معاً -- المتصفح يختار النتيجة الأقل */
.constrained {
    columns: 250px 4;
    /* بحد أقصى 4 أعمدة، كل منها بعرض 250px على الأقل.
       إذا كانت الحاوية 800px: 800/250 = 3.2، إذن 3 أعمدة
       (بحد أقصى 4، لكن 3 فقط تتسع بحد أدنى 250px) */
}

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

التحكم في الفجوة بين الأعمدة

بشكل افتراضي، تضع المتصفحات فجوة بين أعمدة التخطيط متعدد الأعمدة (عادةً 1em، رغم أن القيمة الافتراضية الدقيقة قد تختلف). يمكنك التحكم في هذه الفجوة بشكل صريح باستخدام خاصية column-gap. هذه هي نفس خاصية column-gap المستخدمة في تخطيطات Flexbox وGrid -- تم تقديمها في الأصل للتخطيط متعدد الأعمدة ثم تم تبنيها لاحقاً من قبل وحدات التخطيط الأخرى.

/* فجوة ثابتة بالبكسل */
.article {
    column-count: 3;
    column-gap: 40px;
}

/* استخدام em للحجم النسبي */
.text-content {
    column-count: 2;
    column-gap: 2em;
}

/* استخدام النسبة المئوية (نسبة إلى عرض الحاوية) */
.responsive-gap {
    column-count: 3;
    column-gap: 5%;
}

/* بدون فجوة بين الأعمدة */
.no-gap {
    column-count: 4;
    column-gap: 0;
}

/* الكلمة المفتاحية normal (الافتراضي للمتصفح، عادةً 1em) */
.default-gap {
    column-count: 3;
    column-gap: normal;
}

اختيار حجم الفجوة المناسب مهم لسهولة القراءة. الأعمدة القريبة جداً من بعضها تجعل من الصعب على عين القارئ التتبع من أسفل عمود إلى أعلى العمود التالي. فجوة من 20px إلى 40px (أو حوالي 1.5em إلى 2.5em) تعمل بشكل جيد للنص الأساسي. للأعمدة الضيقة، قد تكون فجوة أصغر مناسبة؛ للأعمدة الواسعة مع نص كبير، تحسن فجوة أكبر الفصل البصري.

إضافة فواصل مرئية باستخدام column-rule

ترسم خاصية column-rule خطاً عمودياً بين الأعمدة، يعمل كفاصل مرئي. تعمل تماماً مثل اختصار border وتقبل نفس القيم. يتم رسم خط الأعمدة في منتصف فجوة الأعمدة، لذا لا يشغل مساحة إضافية ولا يؤثر على عرض الأعمدة.

/* الاختصار الكامل: العرض، النمط، اللون */
.article {
    column-count: 3;
    column-gap: 30px;
    column-rule: 1px solid #ccc;
}

/* الخصائص الفردية */
.detailed-rule {
    column-count: 3;
    column-gap: 40px;
    column-rule-width: 2px;
    column-rule-style: dashed;
    column-rule-color: #3498db;
}

/* أنماط خطوط مختلفة */
.solid-rule    { column-rule-style: solid; }
.dashed-rule   { column-rule-style: dashed; }
.dotted-rule   { column-rule-style: dotted; }
.double-rule   { column-rule-style: double; }
.groove-rule   { column-rule-style: groove; }
.ridge-rule    { column-rule-style: ridge; }
.inset-rule    { column-rule-style: inset; }
.outset-rule   { column-rule-style: outset; }
.none-rule     { column-rule-style: none; }
.hidden-rule   { column-rule-style: hidden; }

تنسيق عملي للخطوط

.newspaper {
    column-count: 3;
    column-gap: 30px;
    column-rule: 1px solid #ddd;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    line-height: 1.7;
    text-align: justify;
}

.newspaper h2 {
    font-size: 28px;
    margin-bottom: 10px;
    column-span: all;
}

.newspaper p {
    margin-bottom: 12px;
    text-indent: 1.5em;
}

امتداد الأعمدة باستخدام column-span

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

.multi-col-article {
    column-count: 3;
    column-gap: 30px;
    column-rule: 1px solid #ddd;
}

/* العنوان الرئيسي يمتد عبر جميع الأعمدة */
.multi-col-article h2 {
    column-span: all;
    text-align: center;
    font-size: 32px;
    margin: 20px 0;
    padding: 15px 0;
    border-top: 2px solid #333;
    border-bottom: 2px solid #333;
}

/* العناوين الفرعية تمتد أيضاً عبر جميع الأعمدة */
.multi-col-article h3 {
    column-span: all;
    font-size: 22px;
    margin: 15px 0 10px;
    color: #2c3e50;
}

/* الاقتباسات البارزة تمتد عبر الأعمدة */
.pull-quote {
    column-span: all;
    font-size: 24px;
    font-style: italic;
    text-align: center;
    padding: 20px 40px;
    margin: 20px 0;
    border-left: 4px solid var(--primary);
    background: var(--bg-light);
}

عندما يحتوي عنصر على column-span: all، يتم مقاطعة تدفق الأعمدة المتعددة. المحتوى فوق العنصر الممتد يملأ الأعمدة بشكل طبيعي. ثم يتم عرض العنصر الممتد عبر العرض الكامل. ثم يبدأ المحتوى أسفل العنصر الممتد مجموعة جديدة من الأعمدة. هذا ينشئ فواصل أقسام طبيعية داخل محتواك متعدد الأعمدة.

التحكم في انكسار الأعمدة

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

break-inside

تتحكم خاصية break-inside فيما إذا كان يجب حدوث انكسار داخل عنصر. الاستخدام الأكثر شيوعاً هو منع العناصر من الانقسام عبر الأعمدة.

/* منع البطاقات من الانقسام عبر الأعمدة */
.card {
    break-inside: avoid;
    margin-bottom: 15px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

/* منع الأشكال من الانقسام */
figure {
    break-inside: avoid;
}

/* منع الاقتباسات من الانقسام */
blockquote {
    break-inside: avoid;
}

/* قيم break-inside */
.auto-break    { break-inside: auto; }    /* السلوك الافتراضي */
.avoid-break   { break-inside: avoid; }   /* تجنب الانكسار */
.avoid-column  { break-inside: avoid-column; } /* تجنب انكسار العمود تحديداً */
.avoid-page    { break-inside: avoid-page; }   /* تجنب انكسار الصفحة (للطباعة) */

break-before و break-after

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

/* فرض عمود جديد قبل كل h3 */
.multi-col h3 {
    break-before: column;
}

/* فرض عمود جديد بعد عنصر فاصل */
.column-separator {
    break-after: column;
}

/* منع الانكسار مباشرة بعد العنوان */
.multi-col h2,
.multi-col h3,
.multi-col h4 {
    break-after: avoid;
}

/* قيم break-before و break-after */
.auto          { break-before: auto; }        /* الافتراضي */
.avoid         { break-before: avoid; }       /* تجنب أي انكسار */
.column-break  { break-before: column; }      /* فرض انكسار عمود */
.avoid-column  { break-before: avoid-column; } /* تجنب انكسار عمود */
.page-break    { break-before: page; }        /* فرض انكسار صفحة (طباعة) */

الأرامل والأيتام (Widows و Orphans)

تأتي خاصيتا widows و orphans من الطباعة المطبوعة وتتحكمان في عدد سطور الفقرة التي يجب أن تظهر في أعلى أو أسفل عمود (أو صفحة). اليتيم (orphan) هو سطر يُترك في أسفل عمود عندما يستمر باقي الفقرة في العمود التالي. الأرملة (widow) هي سطر وحيد في أعلى عمود ينتمي إلى فقرة بدأت في العمود السابق.

.multi-col-text {
    column-count: 3;
    column-gap: 30px;

    /* يجب أن تبقى 3 سطور على الأقل في أسفل العمود */
    orphans: 3;

    /* يجب أن تظهر 3 سطور على الأقل في أعلى عمود جديد */
    widows: 3;
}

/* القيم الافتراضية عادةً 2 لكليهما */
.default-typography {
    orphans: 2;
    widows: 2;
}

تعيين قيم أعلى لـ widows و orphans يحسن الجودة البصرية للنص متعدد الأعمدة. ومع ذلك، كن على دراية بأن المتصفح قد لا يتمكن دائماً من احترام هذه القيم -- إذا كانت الفقرة قصيرة جداً، فإن خيارات المتصفح لتوزيع السطور محدودة. خاصيتا widows و orphans هما تلميحات لمحرك التخطيط، وليست مطالب مطلقة.

ملء الأعمدة: Auto مقابل Balance

تتحكم خاصية column-fill في كيفية توزيع المحتوى عبر الأعمدة. بشكل افتراضي، تحاول المتصفحات موازنة المحتوى بحيث تكون جميع الأعمدة بنفس الارتفاع تقريباً. يمكنك تغيير هذا السلوك لجعل المحتوى يملأ الأعمدة بشكل تسلسلي.

/* التوازن: جميع الأعمدة بارتفاع متساوٍ تقريباً (الافتراضي) */
.balanced {
    column-count: 3;
    column-fill: balance;
    /* يتم توزيع المحتوى بحيث تكون الأعمدة متساوية تقريباً.
       قد يكون العمود الأخير أقصر قليلاً. */
}

/* توازن الكل: التوازن عبر جميع صناديق الأعمدة */
.balance-all {
    column-count: 3;
    column-fill: balance-all;
}

/* تلقائي: ملء الأعمدة بشكل تسلسلي */
.sequential {
    column-count: 3;
    column-fill: auto;
    height: 400px;
    /* يملأ المحتوى العمود الأول بالكامل،
       ثم الثاني، ثم الثالث.
       قد يكون العمود الأخير ممتلئاً جزئياً أو فارغاً. */
}

.fixed-height-columns {
    column-count: 3;
    column-fill: auto;
    height: 300px;
    overflow: hidden;
    column-gap: 25px;
    column-rule: 1px solid #e0e0e0;
}

/* مقارنة مع المتوازن (لا حاجة لارتفاع ثابت) */
.balanced-columns {
    column-count: 3;
    column-fill: balance;
    column-gap: 25px;
    column-rule: 1px solid #e0e0e0;
    /* الأعمدة ستكون بارتفاع متساوٍ تقريباً */
}

تخطيط متعدد الأعمدة متجاوب

أحد نقاط قوة التخطيط متعدد الأعمدة هو مدى جودة عمله مع التصميم المتجاوب. هناك عدة استراتيجيات لجعل تخطيطاتك متعددة الأعمدة تتكيف مع أحجام الشاشات المختلفة.

الاستراتيجية 1: استخدام column-width للتجاوب التلقائي

/* المتصفح يقلل الأعمدة تلقائياً مع تقلص نافذة العرض */
.auto-responsive {
    column-width: 280px;
    column-gap: 30px;
    column-rule: 1px solid #ddd;
}

/* على الشاشات العريضة: 3-4 أعمدة
   على الأجهزة اللوحية: 2 عمودان
   على الهواتف: عمود واحد
   لا حاجة لاستعلامات الوسائط! */

الاستراتيجية 2: استعلامات الوسائط مع column-count

.article-text {
    column-gap: 30px;
    column-rule: 1px solid #ddd;
}

/* سطح المكتب: 3 أعمدة */
@media (min-width: 1024px) {
    .article-text {
        column-count: 3;
    }
}

/* الجهاز اللوحي: 2 عمودان */
@media (min-width: 600px) and (max-width: 1023px) {
    .article-text {
        column-count: 2;
    }
}

/* الهاتف: عمود واحد (الافتراضي) */
@media (max-width: 599px) {
    .article-text {
        column-count: 1;
    }
}

الاستراتيجية 3: الجمع بين النهجين

.content {
    columns: 250px 3;
    column-gap: 25px;
    column-rule: 1px solid #eee;
}

/* على الشاشات الصغيرة جداً، فرض عمود واحد */
@media (max-width: 500px) {
    .content {
        columns: 1;
        column-rule: none;
    }
}

متى تستخدم التخطيط متعدد الأعمدة مقابل Flexbox مقابل Grid

فهم متى تستخدم التخطيط متعدد الأعمدة مقابل Flexbox أو Grid أمر حاسم لكتابة CSS فعال. كل نظام تخطيط له نقاط قوة مختلفة وتم تصميمه لأغراض مختلفة.

استخدم التخطيط متعدد الأعمدة عندما:

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

استخدم Flexbox عندما:

لديك مجموعة من العناصر المميزة التي تحتاج إلى ترتيبها في اتجاه واحد (صف أو عمود). أشرطة التنقل، وتخطيطات البطاقات في صف واحد، وتوسيط المحتوى، وتوزيع المساحة بين العناصر كلها مناسبة طبيعياً لـ Flexbox. عناصر Flexbox هي عناصر مستقلة، وليست نصاً متدفقاً.

استخدم CSS Grid عندما:

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

/* متعدد الأعمدة: نص متدفق عبر أعمدة */
.text-columns {
    column-count: 3;
    column-gap: 20px;
}

/* Flexbox: عناصر مميزة في صف */
.flex-items {
    display: flex;
    gap: 20px;
}
.flex-items > * {
    flex: 1;
}

/* Grid: عناصر موضوعة في شبكة ثنائية الأبعاد */
.grid-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

أمثلة عملية

مثال 1: مقال بأسلوب المجلات

<article class="magazine-article">
    <h1>مستقبل تصميم الويب</h1>
    <p class="lead">نظرة متعمقة على الاتجاهات الناشئة...</p>
    <p>نص أساسي يتدفق عبر أعمدة متعددة...</p>
    <h2>عنوان القسم</h2>
    <p>محتوى إضافي يستمر عبر الأعمدة...</p>
    <blockquote class="pull-quote">
        "التصميم ليس فقط كيف يبدو. التصميم هو كيف يعمل."
    </blockquote>
    <p>فقرات محتوى إضافية...</p>
</article>

.magazine-article {
    columns: 280px 3;
    column-gap: 35px;
    column-rule: 1px solid #e0e0e0;
    font-family: Georgia, serif;
    font-size: 16px;
    line-height: 1.75;
    text-align: justify;
    orphans: 3;
    widows: 3;
}

.magazine-article h1 {
    column-span: all;
    font-size: 42px;
    text-align: center;
    margin-bottom: 5px;
    font-family: "Playfair Display", serif;
}

.magazine-article .lead {
    column-span: all;
    font-size: 20px;
    font-style: italic;
    text-align: center;
    color: #666;
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 2px solid #333;
}

.magazine-article h2 {
    column-span: all;
    font-size: 26px;
    margin: 25px 0 15px;
    padding-top: 15px;
    border-top: 1px solid #ddd;
}

.magazine-article .pull-quote {
    column-span: all;
    font-size: 22px;
    font-style: italic;
    text-align: center;
    padding: 20px 50px;
    margin: 20px 0;
    background: #f8f9fa;
    border-left: 4px solid var(--primary);
    break-inside: avoid;
}

.magazine-article p {
    margin-bottom: 12px;
    text-indent: 1.5em;
}

.magazine-article p:first-of-type {
    text-indent: 0;
}

.magazine-article p:first-of-type::first-letter {
    font-size: 3.5em;
    float: left;
    line-height: 1;
    margin-right: 8px;
    font-family: "Playfair Display", serif;
    color: var(--primary);
}

@media (max-width: 600px) {
    .magazine-article {
        columns: 1;
        column-rule: none;
        text-align: left;
    }
}

مثال 2: قائمة بطاقات متعددة الأعمدة

<div class="card-list">
    <div class="card">
        <h3>عنوان البطاقة 1</h3>
        <p>نص وصف البطاقة...</p>
    </div>
    <div class="card">
        <h3>عنوان البطاقة 2</h3>
        <p>نص وصف البطاقة...</p>
    </div>
    <!-- المزيد من البطاقات... -->
</div>

.card-list {
    column-count: 3;
    column-gap: 20px;
}

.card {
    break-inside: avoid;
    margin-bottom: 20px;
    padding: 20px;
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.card h3 {
    margin-bottom: 8px;
    color: var(--text-dark);
}

.card p {
    color: var(--text-light);
    line-height: 1.6;
}

@media (max-width: 900px) {
    .card-list { column-count: 2; }
}

@media (max-width: 500px) {
    .card-list { column-count: 1; }
}

مثال 3: روابط تذييل متعددة الأعمدة

.footer-links {
    column-count: 4;
    column-gap: 20px;
}

.footer-links li {
    break-inside: avoid;
    padding: 4px 0;
}

.footer-links a {
    color: #bbb;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: #fff;
}

@media (max-width: 768px) {
    .footer-links {
        column-count: 2;
    }
}

@media (max-width: 480px) {
    .footer-links {
        column-count: 1;
    }
}

المشاكل الشائعة وأفضل الممارسات

المشكلة 1: انقسام الصور عبر الأعمدة

يمكن أن تنقسم الصور والعناصر المستبدلة الأخرى عبر الأعمدة، مما يبدو معطلاً. استخدم دائماً break-inside: avoid على حاويات الصور والأشكال داخل التخطيطات متعددة الأعمدة.

.multi-col img {
    max-width: 100%;
    height: auto;
}

.multi-col figure {
    break-inside: avoid;
    margin: 0 0 15px;
}

.multi-col .media-block {
    break-inside: avoid;
    display: inline-block;
    width: 100%;
}

المشكلة 2: العناصر الطويلة التي تتجاوز الأعمدة

إذا كان عنصر واحد أطول من ارتفاع العمود (عندما يكون للحاوية ارتفاع ثابت)، سيتجاوز الحدود. خطط لمحتواك بحيث لا تكون العناصر الفردية طويلة بشكل مفرط، أو تجنب تعيين ارتفاع ثابت على حاوية الأعمدة المتعددة.

المشكلة 3: تعامل المتصفحات غير المتسق مع الانكسار

قد تتعامل المتصفحات المختلفة مع انكسار الأعمدة بشكل مختلف قليلاً، خاصة في الحالات الحدية. اختبر تخطيطاتك متعددة الأعمدة عبر المتصفحات، خاصة عند استخدام break-inside: avoid على عناصر كثيرة، حيث يمكن أن يؤدي هذا إلى اختلافات غير متوقعة في ارتفاع الأعمدة.

دعم المتصفحات وبادئات الموردين

يتمتع التخطيط متعدد الأعمدة بدعم ممتاز في جميع المتصفحات الحديثة. ومع ذلك، قد تتطلب بعض المتصفحات القديمة بادئات الموردين. في التطوير الحديث، بادئات الموردين غير ضرورية عموماً لخصائص الأعمدة المتعددة، ولكن إذا كنت تحتاج لدعم متصفحات قديمة جداً، يمكنك تضمينها كبديل احتياطي.

.legacy-support {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;

    -webkit-column-gap: 30px;
    -moz-column-gap: 30px;
    column-gap: 30px;

    -webkit-column-rule: 1px solid #ddd;
    -moz-column-rule: 1px solid #ddd;
    column-rule: 1px solid #ddd;
}

الملخص

يوفر التخطيط متعدد الأعمدة في CSS حلاً أنيقاً لتدفق المحتوى عبر أعمدة متعددة، مما يجلب تخطيطات بأسلوب الصحف والمجلات إلى الويب بأقل قدر من CSS. تعيّن خاصية column-count عدداً ثابتاً من الأعمدة، وتنشئ column-width أعمدة متجاوبة تتكيف مع المساحة المتاحة، ويجمع اختصار columns كلا القيدين. يمكنك تنسيق فجوات الأعمدة باستخدام column-gap وإضافة فواصل مرئية باستخدام column-rule. تتيح خاصية column-span: all للعناوين والعناصر الأخرى الامتداد عبر جميع الأعمدة، بينما تمنحك break-inside و break-before و break-after التحكم في مكان انقسام المحتوى بين الأعمدة. تحدد خاصية column-fill ما إذا كانت الأعمدة متوازنة أو تُملأ بشكل تسلسلي. يُستخدم التخطيط متعدد الأعمدة بشكل أفضل للمحتوى النصي المستمر؛ لترتيب العناصر المميزة، يعد Flexbox وCSS Grid أدوات أكثر ملاءمة. من خلال فهم نقاط قوة كل نظام تخطيط، يمكنك اختيار الأداة المناسبة لكل تحدي تصميمي.