CSS3-এ columns প্রপার্টি ব্যবহার করে কলাম সংখ্যা এবং প্রস্থ একসাথে সেট করা যায়। এটি column-width এবং column-count-র শর্টহ্যান্ড।
columns: auto | column-width column-count | initial | inherit;
উদাহরণ ১: অটো কলাম (auto auto)
<!DOCTYPE html> <html> <head> <style> .demo { -webkit-columns: auto auto; -moz-columns: auto auto; columns: auto auto; } </style> </head> <body> <h1>Machine Learning</h1> <div class="demo"> Today’s Artificial Intelligence (AI) has far surpassed the hype of blockchain and quantum computing... </div> </body> </html>
আউটপুট
উদাহরণ ২: নির্দিষ্ট প্রস্থ ও সংখ্যা (40px 3)
<!DOCTYPE html> <html> <head> <style> .demo { -webkit-columns: 40px 3; -moz-columns: 40px 3; columns: 40px 3; } </style> </head> <body> <h1>Machine Learning</h1> <div class="demo"> Today’s Artificial Intelligence (AI) has far surpassed the hype of blockchain and quantum computing... </div> </body> </html>
আউটপুট
প্রতি প্রপার্টি আলাদাভাবে
column-count: 3;— নির্দিষ্ট ৩ কলামcolumn-width: 200px;— ন্যূনতম ২০০পিক্স প্রস্থ, ব্রাউজার tự কলাম সংখ্যা নির্ধারণ করেcolumn-gap:— কলাম মাঝপথে গ্যাপcolumn-rule:— কলাম মাঝপথে বর্ডার/লাইন
ব্রাউজার প্রিফিক্স: পুরনো ব্রাউজার için -webkit-columns, -moz-columns। আধুনিক ব্রাউজার প্রিফিক্স ছাড়া সমর্থন করে।
