সি এস এস মাল্টিপল কলাম (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 chrome ie firefox safari opera
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 এর একাধিক কলামের কিছু প্রপার্টি

column-count এই প্রপার্টি দ্বারা টেক্সটগুলো কয়টি কলামে ভাগ হবে তা বলা হয়।
column-fill এই প্রপার্টি দ্বারা কলামগুলো টেক্সট দিয়ে পুরন করার নির্দেশ দেয়া হয়
column-gap এই প্রপার্টি দ্বারা কলামগুলোর মাঝে কতখানি ফাঁক থাকবে তা বলা হয়।
column-rule এই প্রপার্টি দ্বারা কলামগুলোর সব নিয়ম নির্ধারণ করা হয়।
column-rule-color এই প্রপার্টি দ্বারা কলামগুলোর মাঝে কোন বর্ডার থাকলে তার কালার কি হবে তা বলা হয়।
column-rule-style এই প্রপার্টি দ্বারা কলামগুলোর মাঝের বর্ডার কেমন হবে তা বলা হয়।
column-rule-width এই প্রপার্টি দ্বারা কলামগুলোর মাঝের বর্ডারের উইদথ কতখানি হবে তা বলা হয়।
columns এই প্রপার্টিটি column-width এবং column-count দুইটি প্রপার্টির কাজ একাই করতে পারে।