ফ্লেক্সবক্স, গ্রিড, এবং কলাম লেআউটের তুলনা
এই নিবন্ধটি ফ্লেক্সবক্স, গ্রিড, এবং কলাম লেআউটের মধ্যে তুলনা ব্যাখ্যা করে।
আপনি ফ্লেক্সবক্স, গ্রিড, এবং কলাম লেআউটের পার্থক্য এবং প্রতিটির ব্যবহার শিখবেন।
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
ডিসপ্লে অর্ডার পরিবর্তনের একটি উদাহরণ হিসেবে, চলুন flex-direction প্রপার্টিকে column সেট করি।
1.flex-container {
2 flex-direction: column;
3}flex-direction যখন column এ সেট করা হয়, তখন উপাদানগুলি একটি অনুভূমিক লেআউট থেকে উল্লম্ব লেআউটে পরিবর্তিত হয়। লেআউটটি বাম-থেকে-ডানে থেকে উপরের-থেকে-নিচে পরিবর্তিত হয়।
flex-wrap
flex-wrap বৈশিষ্ট্যের জন্য wrap-reverse সেট করলে সাধারণ নির্দেশ থেকে মোড়ানো লাইনের ক্রম উল্টে যায়।
1.flex-container {
2 flex-direction: row;
3 flex-wrap: wrap-reverse;
4}এইভাবে, লাইনগুলো নিচ থেকে উপরে স্তরে প্রদর্শিত হয়।
1.flex-container {
2 flex-direction: column;
3 flex-wrap: wrap-reverse;
4}flex-direction যখন column এবং flex-wrap যখন wrap-reverse সেট করা হয়, তখন উপাদানগুলি উল্লম্বভাবে সাজানো হয় এবং কলামগুলি ডান থেকে বামে মোড়ানো হয়। এই উদাহরণের মতো, কলামের ক্রম সাধারণ বাম থেকে ডান দিক থেকে উল্টানো হয় এবং উপাদানগুলি ডান থেকে বামে যোগ করা হয়।
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-template-areas বৈশিষ্ট্যটি ব্যবহার করা হয়েছে সামগ্রিক গ্রিড বিন্যাসকে ভিজ্যুয়ালি সংজ্ঞায়িত করতে এবং প্রতিটি সেলে ক্ষেত্রের নাম বরাদ্দ করতে। এরপর, প্রতিটি সন্তানের উপাদানে সংশ্লিষ্ট grid-area নাম বরাদ্দ করে, তাদের পছন্দের অবস্থানে স্থাপন করা হয়। 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 (উল্লম্ব) |
| সেরা ব্যবহার | উপাদান সাজানো | পূর্ণ পৃষ্ঠার গঠন | বহু-কলামের টেক্সট |
| বিন্যাস নমনীয়তা | উচ্চ (ক্রম ও আকার) | খুব উচ্চ (ক্ষেত্র নির্ধারণ) | কম (শুধুমাত্র স্বয়ংক্রিয় বিভাজন) |
| চাইল্ডের নিয়ন্ত্রণ | নমনীয় | স্পষ্টভাবে নির্ধারিত | নিয়ন্ত্রণ করা কঠিন |
| বিন্যাস উদ্দেশ্য | বিষয়বস্তু-চালিত | বিন্যাস-চালিত | টেক্সট-চালিত |
সারসংক্ষেপ
- ফ্লেক্সবক্স আদর্শ যখন আপনি একটি সারিতে উপাদান সাজাতে চান, যেমন হেডার বা কার্ড তালিকা।
- গ্রিড উপযুক্ত যখন আপনি সম্পূর্ণ বিন্যাস ডিজাইন করতে চান, যেমন একটি ওয়েব পৃষ্ঠার গঠন।
- কলাম সবচেয়ে ভাল যখন আপনি টেক্সটকে একাধিক কলামে বিন্যাস করতে চান, যেমন প্রবন্ধ বা ব্লগে।
আপনি প্রয়োজন অনুযায়ী এগুলিকে একত্রিত করতে পারেন। উদাহরণস্বরূপ, আপনি গ্রিড দিয়ে সামগ্রিক লেআউট ডিজাইন করতে পারেন এবং ফ্লেক্সের মাধ্যমে অভ্যন্তরীণ উপাদানগুলিকে সজ্জিত করতে পারেন।
আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।