**CSS Multi-column Layout** يُقسّم المحتوى إلى أعمدة مثل الجرائد والمجلات. مفيد جداً للنصوص الطويلة.
**column-count:** عدد الأعمدة المطلوب.
**column-width:** العرض المثالي لكل عمود. يُحسب عدد الأعمدة تلقائياً.
**columns:** اختصار لـ column-count + column-width. `columns: 3 200px;` — 3 أعمدة أو عرض 200px للعمود (أيهما يصنع أعمدة أقل).
**column-gap:** المسافة بين الأعمدة.
**column-rule:** خط فاصل بين الأعمدة (مثل border). `column-rule: 1px solid #e2e8f0;`
**column-span:** يجعل عنصراً يمتد عبر كل الأعمدة. `column-span: all;`
**break-inside: avoid:** يمنع كسر العنصر بين عمودين.
| 1 | /* تخطيط عمودي مثل الصحيفة */ |
| 2 | .article { |
| 3 | columns: 3 240px; |
| 4 | column-gap: 32px; |
| 5 | column-rule: 1px solid #e2e8f0; |
| 6 | } |
| 7 | |
| 8 | /* عنوان عبر كل الأعمدة */ |
| 9 | .article h2 { column-span: all; } |
| 10 | |
| 11 | /* منع كسر البطاقات */ |
| 12 | .card { break-inside: avoid; } |
مثال 1: قائمة بدون ترتيب في أعمدة
| 1 | .features-list { |
| 2 | columns: 2 200px; |
| 3 | column-gap: 24px; |
| 4 | list-style: none; |
| 5 | padding: 0; |
| 6 | } |
| 7 | |
| 8 | .features-list li { |
| 9 | break-inside: avoid; |
| 10 | display: flex; |
| 11 | align-items: flex-start; |
| 12 | gap: 8px; |
| 13 | margin-bottom: 12px; |
| 14 | padding: 8px; |
| 15 | background: #f8fafc; |
| 16 | border-radius: 6px; |
| 17 | } |
| 18 | |
| 19 | /* معرض صور بـ masonry وأعمدة */ |
| 20 | .masonry-gallery { |
| 21 | columns: 3 180px; |
| 22 | column-gap: 12px; |
| 23 | } |
| 24 | |
| 25 | .masonry-gallery img { |
| 26 | width: 100%; |
| 27 | margin-bottom: 12px; |
| 28 | border-radius: 6px; |
| 29 | display: block; |
| 30 | } |