Articles
সিএসএস-এর পরিচিতি
কলাম বিন্যাস সম্পর্কিত CSS প্রপার্টিগুলি

কলাম বিন্যাস সম্পর্কিত CSS প্রপার্টিগুলি

এই প্রবন্ধটি কলাম বিন্যাস সম্পর্কিত CSS প্রোপার্টিগুলি ব্যাখ্যা করে।

আপনি কীভাবে কলাম বিন্যাস তৈরি করবেন তা শিখতে পারবেন।

YouTube Video

প্রিভিউর জন্য HTML

css-columns.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-columns.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Columns</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Layout Related Properties</h2>
20        </header>
21        <article>
22            <h3>columns</h3>
23            <section style="width: 100%; height: 350px;">
24                <h4>Columns Example</h4>
25                <header><h4>columns: 100px 3; column-gap: 20px; column-rule: 2px solid #333;</h4></header>
26                <section class="sample-view">
27                    <section class="columns-container">
28                        <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</h5>
29                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
30                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
31                        <p>Pellentesque malesuada diam eu sem finibus scelerisque.</p>
32                        <p>Integer eget dolor nec est dignissim fermentum ut eget nunc.</p>
33                        <p>Morbi in nibh in lorem vestibulum sollicitudin.</p>
34                    </section>
35                </section>
36            </section>
37        </article>
38        <article>
39            <h3>order</h3>
40            <section style="height: 300px;">
41                <header><h4>column-width: 250px</h4></header>
42                <section class="sample-view">
43                    <div class="container">
44                        <div class="item item-1">Item 1</div>
45                        <div class="item item-2">Item 2</div>
46                        <div class="item item-3">Item 3</div>
47                    </div>
48                </section>
49            </section>
50        </article>
51    </main>
52</body>
53</html>

কলাম বিন্যাস

কলামসমূহ 

1.columns-container {
2    columns: 100px 3;
3    column-gap: 20px;
4    column-rule: 2px solid #333;
5}
6
7h5 {
8  column-span: all;
9}

CSS-এর columns প্রোপার্টি বিষয়বস্তুকে একাধিক কলামে ভাগ করার জন্য একটি সহজ পদ্ধতি প্রদান করে। একটি মাত্র ডিক্লারেশন দিয়ে আপনি সহজেই কলামের প্রস্থ এবং সংখ্যা নির্ধারণ করতে পারেন, যা রেসপনসিভ ডিজাইনের জন্য উপযুক্ত। এটি বিশেষভাবে কার্যকর যখন একটি লেআউট প্রয়োজন যেখানে টেক্সট লম্বাভাবে প্রদর্শিত হয় এবং একাধিক কলামে বিন্যস্ত থাকে, যেমন সংবাদপত্র বা ম্যাগাজিনে।

  • এই উদাহরণে, বিষয়বস্তু ৩টি কলামে ভাগ করা হয়েছে যার মধ্যে ২০px ফাঁক এবং কলামের মধ্যে ২px এর একটি নিয়ম রয়েছে। অতিরিক্তভাবে, h5 উপাদানটি একাধিক কলামের উপর বিস্তৃত।

columns হলো column-width এবং column-count প্রোপার্টির শর্টহ্যান্ড।

columns প্রোপার্টির সিনট্যাক্স 

1columns: <column-width> <column-count>;

columns নিম্নলিখিত ফরম্যাট অনুসরণ করে।

  • <column-width>: প্রতিটি কলামের প্রস্থ নির্ধারণ করে। আপনি মান হিসাবে auto অথবা যেকোনো দৈর্ঘ্যের একক (যেমন, px, em, % ইত্যাদি) ব্যবহার করতে পারেন।
  • <column-count>: কলামের সংখ্যা নির্ধারণ করে। সংখ্যাগত মান হিসাবে প্রকাশিত।
column-width প্রোপার্টি 
1.container {
2  column-width: 250px;
3}

column-width হলো এমন একটি প্রোপার্টি যা প্রতিটি কলামের ন্যূনতম প্রস্থ নির্ধারণ করে। column-count এর সাথে ব্যবহার করলে, স্বয়ংক্রিয়ভাবে কলামের স্থাপনা এবং সামঞ্জস্য সম্ভব হয়ে ওঠে। ব্রাউজার কন্টেনারের প্রস্থ বিবেচনা করে প্রয়োজনীয় কলামের সংখ্যা স্বয়ংক্রিয়ভাবে গণনা করে।

  • এই উদাহরণে, প্রতিটি কলামের প্রস্থ ২৫০px এবং কন্টেনারের প্রস্থ অনুযায়ী সর্বোত্তম কলামের সংখ্যা নির্ধারণ করা হয়।
column-count বৈশিষ্ট্য 
1.container {
2  column-count: 3;
3}

column-count এমন একটি বৈশিষ্ট্য যা নির্দিষ্ট উপাদানটি কতটি কলামে বিভক্ত হবে তা স্পষ্টভাবে নির্ধারণ করে। column-width এর থেকে ভিন্ন, এটি কলামের সংখ্যা স্থির করে।

  • এই উদাহরণে, কন্টেইনারের ভেতরের সামগ্রী তিনটি কলামে বিভক্ত হয়েছে।
column-gap বৈশিষ্ট্য 
1.container {
2  column-gap: 20px;
3}

column-gap এমন একটি বৈশিষ্ট্য যা প্রতিটি কলামের মধ্যে স্থান (ফাঁক) নির্ধারণ করে। gap নামে CSS Grid এর একটি সাধারণ বৈশিষ্ট্যও আছে, কিন্তু column-gap শুধুমাত্র কলামের মধ্যবর্তী মার্জিন কাস্টোমাইজ করতে সহায়ক।

  • এই উদাহরণে, প্রতিটি কলামের মধ্যে ২০px মার্জিন রয়েছে। ডিফল্ট মান হল ১৬px।
column-rule বৈশিষ্ট্য 
1.container {
2  column-rule: 2px solid #333;
3}

column-rule কলামের মধ্যে রেখা আঁকার একটি বৈশিষ্ট্য। এর সিনট্যাক্স border বৈশিষ্ট্যের মতো এবং এটি আপনাকে রেখার প্রস্থ, স্টাইল এবং রং নির্ধারণ করতে দেয়।

  • এই উদাহরণে, কলামের মধ্যে ২px প্রস্থের একটি সলিড কালো রেখা দেখানো হয়েছে। column-rule-কে নিম্নলিখিত তিনটি বৈশিষ্ট্যে বিভক্ত করা যেতে পারে।
    • column-rule-width: রেখার প্রস্থ নির্ধারণ করে।
    • column-rule-style: রেখার স্টাইল নির্ধারণ করে। উদাহরণস্বরূপ, solid, dashed, dotted ইত্যাদি।
    • column-rule-color: রেখার রং নির্ধারণ করে।
column-span বৈশিষ্ট্য 
1h5 {
2  column-span: all;
3}

column-span এমন একটি বৈশিষ্ট্য যা একটি নির্দিষ্ট উপাদানকে একাধিক কলামের উপর বিস্তৃত করতে সেট করে। এটি প্রধানত শিরোনাম বা টাইটেল-এর মতো উপাদানগুলোর জন্য ব্যবহৃত হয়। এতে দুটি সম্ভাব্য মান রয়েছে:। - none: উপাদানটি কলামের মধ্যে বিস্তৃত হয় না এবং একটি কলামের মধ্যে ফিট করে। এটি ডিফল্ট মান। - all: উপাদানটি সকল কলামের উপর বিস্তৃত হয়ে প্রদর্শিত হয়।

  • এই উদাহরণে, h5 উপাদানটি একাধিক কলামের উপর বিস্তৃত হয়ে প্রদর্শিত হয়েছে।
column-fill প্রোপার্টি 
1.container {
2  column-fill: balance;
3}

column-fill হলো একটি প্রোপার্টি যা কন্টেন্ট কীভাবে কলামের মধ্যে বিতরণ হবে তা নিয়ন্ত্রণ করে। সাধারণত, কলামগুলো যতটা সম্ভব সমানভাবে পূরণ করা হয়, তবে এই প্রোপার্টি আপনাকে একটি ভিন্ন বিন্যাস নির্ধারণ করতে দেয়। নিম্নলিখিত মানগুলি পাওয়া যায়:। - balance: কন্টেন্ট সমানভাবে কলাম পূরণের জন্য সাজানো হয়। এটি ডিফল্ট মান। - auto: কলাম স্বয়ংক্রিয়ভাবে পূর্ণ হবে। শেষ কলামটি বড় হতে পারে।

  • এই সেটিংটি সামঞ্জস্য করে যাতে কন্টেন্ট সমানভাবে বিতরণ হয়।
মিডিয়া কোয়েরিজের সঙ্গে ব্যবহার করা 
1.container {
2  columns: 200px 3;
3}
4
5@media (max-width: 600px) {
6  .container {
7    columns: 1;
8  }
9}

columns প্রোপার্টি মিডিয়া কোয়েরিজের সঙ্গে একত্রিত হতে পারে প্রতিক্রিয়াশীল ডিজাইন সমর্থনের জন্য। আপনি বিভিন্ন স্ক্রিন সাইজের উপর নির্ভর করে কলামের সংখ্যা এবং প্রস্থ নমনীয়ভাবে পরিবর্তন করতে পারেন।

  • এই উদাহরণে, যখন স্ক্রিনের প্রস্থ ৬০০ পিক্সেল বা এর কম হবে, তখন ১টি কলাম হবে। বড় স্ক্রিনের জন্য, এটি ৩টি কলামে বিভক্ত হবে, প্রতিটির প্রস্থ হবে ২০০ পিক্সেল।

সারসংক্ষেপ

CSS columns প্রোপার্টি বহু কলামের মাধ্যমে সহজেই লেআউট প্রয়োগ করার জন্য একটি শক্তিশালী টুল। এটি প্রতিক্রিয়াশীল ডিজাইন এবং পাঠযোগ্যতাকে প্রাধান্য দেয় এমন পাঠ্যের লেআউটগুলির জন্য বিশেষভাবে কার্যকর। সম্পর্কিত প্রোপার্টির সংমিশ্রণে আপনি কলামের সংখ্যা, প্রস্থ, ফাঁক, সজ্জা ইত্যাদি নমনীয়ভাবে কাস্টমাইজ করতে পারেন।

এটি আরও উন্নত ডিজাইনের সহজ প্রয়োগের অনুমতি দেয়, তাই এটি কাজে লাগানোর চেষ্টা করুন।

অর্ডার 

 1.container {
 2    all:initial;
 3    display: flex;
 4}
 5.item {
 6    padding: 10px;
 7    background-color: lightblue;
 8    margin: 5px;
 9}
10.item-1 {
11    order: 3;
12}
13.item-2 {
14    order: 1;
15}
16.item-3 {
17    order: 2;
18}

CSS order প্রোপার্টি Flexbox বা Grid লেআউট ব্যবহারের সময় এলিমেন্টগুলির প্রদর্শন ক্রম নিয়ন্ত্রণ করতে ব্যবহৃত হয়। সাধারণত, এলিমেন্টগুলি HTML মার্কআপ অনুযায়ী রেন্ডার হয়, কিন্তু order প্রোপার্টি ব্যবহার করে আপনি তাদের ভিজ্যুয়াল ক্রম পরিবর্তন করতে পারেন। এই প্রোপার্টি নমনীয় ব্যবহারকারীর ইন্টারফেস ডিজাইন করতে এবং প্রতিক্রিয়াশীল ডিজাইন নির্মাণে সাহায্য করে।

  • এই উদাহরণে, আইটেমগুলি HTML-এ Item 1, Item 2, Item 3 হিসেবে মার্কআপ করা আছে, তবে CSS order প্রোপার্টির কারণে প্রদর্শনের ক্রম Item 2, Item 3, Item 1 এ পরিবর্তিত হয়।

order প্রোপার্টির বুনিয়াদি

order প্রোপার্টি Flexbox বা Grid কন্টেইনারের আইটেমগুলিতে প্রয়োগ করা হয়। আপনি প্রতিটি আইটেমের জন্য পূর্ণসংখ্যার মান সেট করে স্থাপনের ক্রম নির্ধারণ করেন। ডিফল্টভাবে, সমস্ত আইটেমের order মান 0 হিসাবে সেট করা থাকে। এই মান পরিবর্তন করে, আপনি নির্ধারণ করতে পারেন আইটেমগুলি কোন ক্রমে প্রদর্শিত হবে।

মূল সিনট্যাক্স 
1.item {
2  order: <integer>;
3}
  • আপনি order মানের জন্য যেকোনো পূর্ণসংখ্যা নির্ধারণ করতে পারেন। ইতিবাচক, নেতিবাচক বা শূন্য মান ব্যবহার করা যেতে পারে। মান যত ছোট হবে, উপাদান তত আগে প্রদর্শিত হবে, এবং মান যত বড় হবে, তত পরে প্রদর্শিত হবে।

ইতিবাচক এবং ঋণাত্মক মান ব্যবহার

আপনি order বৈশিষ্ট্যে নেতিবাচক মানও নির্ধারণ করতে পারেন। নেতিবাচক মানযুক্ত উপাদান ডিফল্ট ক্রমের আগেই প্রদর্শিত হয়।

1.item-1 {
2    order: -1;
3}
4.item-2 {
5    order: 2;
6}
7.item-3 {
8    order: 1;
9}

এই উদাহরণে, Item 1 এর order: -1 সেট করা আছে, তাই এটি প্রথমে প্রদর্শিত হয়। এর বিপরীতে, Item 3 এর order: 1 সেট করা আছে এবং Item 2 এর order: 2 সেট করা আছে, তাই তারা ঐ ক্রমে প্রদর্শিত হয়।

রেস্পন্সিভ ডিজাইনে order ব্যবহার

রেস্পন্সিভ ডিজাইনে, স্ক্রিনের আকার অনুযায়ী উপাদানগুলির ক্রম পরিবর্তন করা সম্ভব। উদাহরণস্বরূপ, মোবাইল ভিউতে, গুরুত্বপূর্ণ তথ্য প্রথমে প্রদর্শনের জন্য উপাদানগুলির ক্রম পরিবর্তন করা যেতে পারে।

 1.item-1 {
 2    order: 1;
 3}
 4.item-2 {
 5    order: 2;
 6}
 7.item-3 {
 8    order: 3;
 9}
10
11/* Change the order on screens with a width of 800px or less */
12@media (max-width: 800px) {
13    .item-1 {
14        order: 3;
15    }
16    .item-2 {
17        order: 1;
18    }
19    .item-3 {
20        order: 2;
21    }
22}

এই উদাহরণে, সাধারণ ভিউতে আইটেমগুলি Item 1, Item 2, Item 3 ক্রমে প্রদর্শিত হয়, তবে যখন স্ক্রিনের প্রস্থ 600px এর নিচে থাকে, Item 2 প্রথমে, Item 3 পরবর্তী, এবং Item 1 সর্বশেষে প্রদর্শিত হয়।

order এর জন্য বিবেচনা

order বৈশিষ্ট্য ব্যবহার করলে ভিজ্যুয়াল ক্রম এবং DOM গাছের ক্রম আলাদা হতে পারে। এটি অ্যাক্সেসিবিলিটি টুলগুলিতে, যেমন স্ক্রিন রিডারের ক্ষেত্রে প্রভাব ফেলতে পারে। যখন ক্রম পরিবর্তিত হয়, তখন কীবোর্ড নেভিগেশন এবং অন্যান্য সহায়ক প্রযুক্তিগুলি প্রত্যাশিতভাবে কাজ নাও করতে পারে। এই কারণে, order ব্যবহারের সময় ব্যবহারকারীর অভিজ্ঞতার উপর প্রভাব সম্পর্কে সতর্কতার সঙ্গে বিবেচনা করা প্রয়োজন।

উপসংহার

CSS-এর order বৈশিষ্ট্য একটি শক্তিশালী সরঞ্জাম যা আপনাকে Flexbox বা Grid লেআউটে উপাদানগুলির প্রদর্শন ক্রম সহজে নিয়ন্ত্রণ করতে দেয়। ইতিবাচক বা নেতিবাচক মান ব্যবহার করে আপনি উপাদানগুলির ক্রম নমনীয়ভাবে পরিবর্তন করতে পারেন, যা রেস্পন্সিভ ডিজাইনে বিশেষভাবে কার্যকর। তবে, অ্যাক্সেসিবিলিটি এবং ভিজ্যুয়াল ক্রম ও HTML কাঠামোর মধ্যে পার্থক্যের দিকে মনোযোগ দেওয়া উচিত। যদি এগুলি সঠিকভাবে বিবেচনা করা হয়, তবে order বৈশিষ্ট্য আরও গতিশীল এবং নমনীয় লেআউট তৈরিতে কার্যকর হতে পারে।

আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।

YouTube Video

গ্রিড লেআউট সম্পর্কিত CSS প্রোপার্টি