ফ্লেক্সবক্স, গ্রিড, এবং কলাম লেআউটের তুলনা
এই নিবন্ধটি ফ্লেক্সবক্স, গ্রিড, এবং কলাম লেআউটের মধ্যে তুলনা ব্যাখ্যা করে।
আপনি ফ্লেক্সবক্স, গ্রিড, এবং কলাম লেআউটের পার্থক্য এবং প্রতিটির ব্যবহার শিখবেন।
YouTube Video
প্রিভিউর জন্য HTML
css-layout-comparision.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-layout-comparision.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Layout</h1>
14 </header>
15 <!-- Main content -->
16 <main>
17 <header>
18 <h2>Layout Comparision</h2>
19 </header>
20 <article>
21 <h3>flex</h3>
22 <section>
23 <section class="sample-view">
24 <div class="flex-container">
25 <div class="flex-item">Item 1</div>
26 <div class="flex-item">Item 2</div>
27 <div class="flex-item">Item 3</div>
28 <div class="flex-item">Item 4</div>
29 <div class="flex-item">Item 5</div>
30 <div class="flex-item">Item 6</div>
31 <div class="flex-item">Item 7</div>
32 <div class="flex-item">Item 8</div>
33 <div class="flex-item">Item 9</div>
34 </div>
35 </section>
36 </section>
37 </article>
38 <article>
39 <h3>grid</h3>
40 <section>
41 <section class="sample-view">
42 <div class="grid-box">
43 <div class="grid-item item1">Item 1</div>
44 <div class="grid-item item2">Item 2</div>
45 <div class="grid-item item3">Item 3</div>
46 <div class="grid-item item4">Item 4</div>
47 <div class="grid-item item5">Item 5</div>
48 <div class="grid-item item6">Item 6</div>
49 <div class="grid-item item7">Item 7</div>
50 <div class="grid-item item8">Item 8</div>
51 <div class="grid-item item9">Item 9</div>
52 </div>
53 </section>
54 </section>
55 </article>
56 <article>
57 <h3>column</h3>
58 <section>
59 <section class="sample-view">
60 <section class="columns-container">
61 <p class="columns-item">Item 1</p>
62 <p class="columns-item">Item 2</p>
63 <p class="columns-item">Item 3</p>
64 <p class="columns-item">Item 4</p>
65 <p class="columns-item">Item 5</p>
66 <p class="columns-item">Item 6</p>
67 <p class="columns-item">Item 7</p>
68 <p class="columns-item">Item 8</p>
69 <p class="columns-item">Item 9</p>
70 </section>
71 </section>
72 </section>
73 </article>
74 </main>
75</body>
76</html>ফ্লেক্সবক্স, গ্রিড, এবং কলাম লেআউটের তুলনা
CSS এর flex, grid এবং columns হল উপাদানগুলি লাইনিং ও সংস্থাপন করার কৌশলগুলি, তবে প্রতিটি কৌশলের নিজস্ব শক্তি এবং আদর্শ ব্যবহারের ক্ষেত্র রয়েছে। তাদের পার্থক্য তুলনার মাধ্যমে নিচে পরিষ্কারভাবে ব্যাখ্যা করা হয়েছে।
Flexbox（display: flex）
1.flex-container {
2 display: flex;
3 justify-content: space-between;
4 align-items: center;
5 flex-wrap: wrap;
6 background-color: lightblue;
7 height: 200px;
8}
9
10.flex-item {
11 background-color: lightskyblue;
12 padding: 10px;
13 margin: 5px;
14 width: 70px;
15 height: auto;
16}বৈশিষ্ট্যসমূহ
- একদিকীয় লেআউটের জন্য উপযুক্ত—অথবা অনুভূমিক বা উল্লম্ব।
- উপাদানগুলোর ক্রম এবং নমনীয়তা উপর নমনীয় নিয়ন্ত্রণ প্রদান করে।
- ছোট আকৃতির লেআউটের জন্য সেরা উপযোগী, যেমন নেভিগেশন বার এবং বোতামের দল।
সুবিধাসমূহ
- সন্তানের উপাদানগুলোর আকার স্বয়ংক্রিয়ভাবে সামঞ্জস্য করে।
- আপনি
flex-direction,flex-wrap, এবংorderএর মতো প্রপার্টিগুলি ব্যবহার করে উপাদানের ক্রম পরিবর্তন করতে পারেন।
ডিসপ্লে অর্ডার পরিবর্তনের উদাহরণ
ডিসপ্লে অর্ডার পরিবর্তনের একটি উদাহরণ হিসেবে, চলুন flex-direction প্রপার্টিকে column সেট করি।
1.flex-container {
2 flex-direction: column;
3}flex-direction যখন column এ সেট করা হয়, তখন উপাদানগুলি একটি অনুভূমিক লেআউট থেকে উল্লম্ব লেআউটে পরিবর্তিত হয়। লেআউটটি বাম-থেকে-ডানে থেকে উপরের-থেকে-নিচে পরিবর্তিত হয়।
Grid（display: grid）
1.grid-box {
2 display: grid;
3 grid-template-columns: 100px 100px 100px;
4 grid-template-rows: 50px 50px 50px;
5 gap: 20px;
6 background-color: lightblue;
7 border: none;
8 height: 200px;
9}
10
11.grid-item {
12 background-color: lightskyblue;
13 width: 100%;
14 padding: 0;
15 text-align: center;
16}বৈশিষ্ট্যসমূহ
- দ্বিমাত্রিক লেআউটের জন্য আদর্শ।
- গ্রিড-ভিত্তিক লেআউটের পরিষ্কার সংজ্ঞা দিতে সক্ষম।
- আরও জটিল ডিজাইন এবং সামগ্রিক পেজ কাঠামোর জন্য চমৎকার।
সুবিধাসমূহ
- পঙক্তি এবং কলাম একসঙ্গে নির্ধারণ করা যেতে পারে।
- নির্দিষ্ট নামযুক্ত এলাকাগুলোর (
grid-area) মাধ্যমে বিভাগ স্থাপন করা যেতে পারে। - সন্তানের উপাদানগুলো গ্রিডে স্বাধীনভাবে স্থাপন করা যেতে পারে, যা ক্রম নিয়ন্ত্রণে নমনীয়তা প্রদান করে।
ডিসপ্লে অর্ডার পরিবর্তনের উদাহরণ
ডিসপ্লে অর্ডার পরিবর্তনের একটি উদাহরণ হিসেবে, চলুন grid-template-areas প্রপার্টি ব্যবহার করে ডিসপ্লে পজিশন সেট করি।
1.grid-box {
2 grid-template-areas:
3 "item1 item4 item5"
4 "item2 item6 item7"
5 "item3 item8 item9";
6}
7
8.item1 { grid-area: item1; }
9.item2 { grid-area: item2; }
10.item3 { grid-area: item3; }
11.item4 { grid-area: item4; }
12.item5 { grid-area: item5; }
13.item6 { grid-area: item6; }
14.item7 { grid-area: item7; }
15.item8 { grid-area: item8; }
16.item9 { grid-area: item9; }যেমন আপনি দেখতে পাচ্ছেন, grid কেবল ডিসপ্লে অর্ডার পরিবর্তন করার জন্যই নয়, অনন্য লেআউট তৈরি করার জন্যও ব্যবহার করা যেতে পারে।
Columns（column-count, column-width）
1.columns-container {
2 background-color: lightblue;
3 columns: 100px 3;
4 column-gap: 20px;
5 column-rule: 2px solid #333;
6 padding: 10px;
7}
8
9.columns-item {
10 background-color: lightskyblue;
11 text-align: center;
12 margin: 20px auto;
13 color: white;
14 display: flex;
15 align-items: center;
16 justify-content: center;
17 font-size: 1.2rem;
18 border: 1px solid #ccc;
19 height: 50px;
20}বৈশিষ্ট্যসমূহ
- আপনি সহজেই ম্যাগাজিন স্টাইলের কলাম তৈরি করতে পারেন।
- প্রবাহিত টেক্সট বিষয়বস্তুর জন্য উপযুক্ত।
- HTML উৎসের ক্রম অনুসরণ করে, যা উপাদানের ক্রম নিয়ন্ত্রণের জন্য কম উপযোগী হতে পারে।
সুবিধাসমূহ
- লম্বা টেক্সট স্বয়ংক্রিয়ভাবে বিভক্ত করতে পারে।
- আপনি খুব সহজেই পত্রিকা-স্টাইলের লেআউট তৈরি করতে পারেন।
তুলনামূলক টেবল
| বৈশিষ্ট্য / ব্যবহার ক্ষেত্র | ফ্লেক্সবক্স | গ্রিড | কলাম |
|---|---|---|---|
| বিন্যাস মাত্রা | ১D (অনুভূমিক বা উল্লম্ব) | ২D (অনুভূমিক ও উল্লম্ব) | ১D (উল্লম্ব) |
| সেরা ব্যবহার | উপাদান সাজানো | পূর্ণ পৃষ্ঠার গঠন | বহু-কলামের টেক্সট |
| বিন্যাস নমনীয়তা | উচ্চ (ক্রম ও আকার) | খুব উচ্চ (ক্ষেত্র নির্ধারণ) | কম (শুধুমাত্র স্বয়ংক্রিয় বিভাজন) |
| চাইল্ডের নিয়ন্ত্রণ | নমনীয় | স্পষ্টভাবে নির্ধারিত | নিয়ন্ত্রণ করা কঠিন |
| বিন্যাস উদ্দেশ্য | বিষয়বস্তু-চালিত | বিন্যাস-চালিত | টেক্সট-চালিত |
সারসংক্ষেপ
- ফ্লেক্সবক্স আদর্শ যখন আপনি একটি সারিতে উপাদান সাজাতে চান, যেমন হেডার বা কার্ড তালিকা।
- গ্রিড উপযুক্ত যখন আপনি সম্পূর্ণ বিন্যাস ডিজাইন করতে চান, যেমন একটি ওয়েব পৃষ্ঠার গঠন।
- কলাম সবচেয়ে ভাল যখন আপনি টেক্সটকে একাধিক কলামে বিন্যাস করতে চান, যেমন প্রবন্ধ বা ব্লগে।
আপনি প্রয়োজন অনুযায়ী এগুলিকে একত্রিত করতে পারেন। উদাহরণস্বরূপ, আপনি গ্রিড দিয়ে সামগ্রিক লেআউট ডিজাইন করতে পারেন এবং ফ্লেক্সের মাধ্যমে অভ্যন্তরীণ উপাদানগুলিকে সজ্জিত করতে পারেন।
আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।