সি এস এস মাল্টিপল কলাম (CSS3 Multiple Columns)

CSS3 Multiple Columns অর্থাৎ css3 তে একাধিক কলাম তৈরি করা

css3 ব্যবহার করে আপনি টেক্সটগুলোকে প্রয়োজনমত সাজানোর জন্য একাধিক কলাম তৈরি করতে পারবেন।
এই অধ্যায়ে আপনি নিম্নোক্ত কলাম প্রপার্টি গুলো সম্পর্কে জানবেন-

• column-count
• column-gap
• Column-rule

ব্রাউজার সাপোর্ট (Browser Support)

এই প্রপার্টিটি সকল নতুন ভার্সন এর ব্রাউজারগুলোতে সাপোর্ট করে। IE তে 10.0, Google Chrome 4.0 -webkit-, mozilla 2.0 -moz-, Safari 3.1 -webkit-, opera 15.0 -webkit-11.1
এখানে -webkit- এবং -moz- ব্যবহার করে ব্রাউজারগুলোর প্রথম ভার্সন বুঝানো হয়েছে যা এই prefix গুলো সাপোর্ট করে।

Property
column-count	4.0 -webkit-	12.0	10.0	2.0 -moz-	3.1 -webkit-	15.0 -webkit- 11.1
column-gap	4.0 -webkit-	12.0	10.0	2.0 -moz-	3.1 -webkit-	15.0 -webkit- 11.1
column-rule	4.0 -webkit-	12.0	10.0	2.0 -moz-	3.1 -webkit-	15.0 -webkit- 11.1
column-rule-color	4.0 -webkit-	12.0	10.0	2.0 -moz-	3.1 -webkit-	15.0 -webkit 11.1
column-rule-style	4.0 -webkit-	12.0	10.0	2.0 -moz-	3.1 -webkit-	15.0 -webkit 11.1
column-rule-width	4.0 -webkit-	12.0	10.0	2.0 -moz-	3.1 -webkit-	15.0 -webkit 11.1
column-width	4.0 -webkit-	12.0	10.0	2.0 -moz-	3.1 -webkit-	15.0 -webkit 11.1

CSS3 ব্যবহার করে একাধিক কলাম তৈরি

column-count প্রপার্টি দ্বারা কয়টি কলাম হবে তা বলে দেয়া হয়।
উদাহরণ-

div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

উপরের এই css টুকু লিখার ফলে আপনার div এর মধ্যে লিখা টেক্সটগুলো তিনটি কলামে বিভক্ত হবে।

CSS3 দিয়ে কলামগুলোর মাঝে কতখানি ফাঁকা থাকবে তাও বলে দেয়া যায়।

column-gap প্রপার্টি দ্বারা কলামগুলোর মাঝে কতখানি জায়গা ফাঁকা থাকবে তা বলে দেয়া হয়।
উদাহরণ-

div {
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}

CSS3 কলামের নিয়ম (CSS3 column rules)

column-rule প্রপার্টি দ্বারা কলামের width, style এবং color এই তিনটি বিষয় বলে দেয়া হয়।
উদাহরণ-

div {
    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
    -moz-column-rule-style: solid; /* Firefox */
    column-rule-style: solid;
}

CSS3 এর একাধিক কলামের কিছু প্রপার্টি