Multi-column layout একটি content block — সাধারণত টেক্সট — কে আলাদা এলিমেন্টে হাতে ভাগ না করেই স্বয়ংক্রিয়ভাবে একাধিক newspaper-style column-এ flow করে।
.article {
column-count: 3;
}column-এর একটি fixed সংখ্যার বদলে, এটা একটি ideal width সেট করে — container যতগুলো ধরতে পারে ব্রাউজার প্রায় সেই width-এর ততগুলো column ফিট করায়।
.article {
column-width: 200px;
}.article {
column-count: 3;
column-gap: 32px;
}column-এর মধ্যে একটি line আঁকে, ঠিক border-এর মতো style করা।
.article {
column-rule: 1px solid #ccc;
}এটা ছাড়া, একটি heading বা image দুটি column জুড়ে বিশ্রীভাবে ভাগ হয়ে যেতে পারে।
.article h3, .article img {
break-inside: avoid;
}আসলে কখন এটার জন্য যাবেন
Multi-column layout long-form টেক্সটের (article, ছোট item-এর একটি list) জন্য মানানসই — আলাদা UI component সাজানোর জন্য, আগের lesson-এর Grid বা Flexbox প্রায় সবসময় ভালো tool।