গ্রিড লেআউট সম্পর্কিত CSS প্রোপার্টি
এই প্রবন্ধটি গ্রিড লেআউট সম্পর্কিত CSS প্রোপার্টি ব্যাখ্যা করে।
আপনি গ্রিড এবং ইনলাইন গ্রিড কীভাবে বর্ণনা করবেন তা শিখতে পারেন।
YouTube Video
প্রিভিউর জন্য HTML
css-grid.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-grid.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Layout</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Layout Related Properties</h2>
20 </header>
21 <article>
22 <h3>grid</h3>
23 <section style="width: 100%; height: 350px;">
24 <header><h4>display: grid; grid-template-columns: 100px 200px auto; grid-template-rows: 100px auto 50px;</h4></header>
25 <section class="sample-view">
26 <div class="grid-box">
27 <div class="grid-item">Item 1</div>
28 <div class="grid-item">Item 2</div>
29 <div class="grid-item">Item 3</div>
30 <div class="grid-item">Item 4</div>
31 <div class="grid-item">Item 5</div>
32 <div class="grid-item">Item 6</div>
33 </div>
34 </section>
35 </section>
36 <section style="width: 100%; height: 550px;">
37 <header><h4>display: grid; grid-template-columns: 120px 1fr 80px; grid-template-rows: 100px 1fr 100px;</h4></header>
38 <section class="sample-view">
39 <div class="grid-container" style="color: #666;">
40 <header class="grid-header">Header</header>
41 <aside class="grid-sidebar">Sidebar</aside>
42 <article class="grid-content">
43 <p>Content</p>
44 </article>
45 <aside class="grid-ads">Ads</aside>
46 <footer class="grid-footer">Footer</footer>
47 </div>
48 </section>
49 </section>
50 </article>
51 <article>
52 <h3>gap</h3>
53 <section style="height: 300px;">
54 <header><h4>display: grid; gap: 30px 10px;</h4></header>
55 <section class="sample-view">
56 <div class="gap-grid-container">
57 <div>Item 1</div>
58 <div>Item 2</div>
59 <div>Item 3</div>
60 <div>Item 4</div>
61 <div>Item 5</div>
62 <div>Item 6</div>
63 </div>
64 </section>
65 </section>
66 <section>
67 <header><h4>display: flex; gap: 50px;</h4></header>
68 <section class="sample-view">
69 <div class="gap-flex-container">
70 <div>Item 1</div>
71 <div>Item 2</div>
72 <div>Item 3</div>
73 </div>
74 </section>
75 </section>
76 </article>
77 <article>
78 <h3>grid-template-areas</h3>
79 <section style="height: 350px;">
80 <header><h4>grid-template-areas: "header header" "sidebar content" "footer footer";</h4></header>
81 <section class="sample-view">
82 <div class="grid-template-areas-container">
83 <div class="grid-template-areas-header">Header</div>
84 <div class="grid-template-areas-sidebar">Sidebar</div>
85 <div class="grid-template-areas-content">Content</div>
86 <div class="grid-template-areas-footer">Footer</div>
87 </div>
88 </section>
89 </section>
90 </article>
91 <article>
92 <h3>inline-grid</h3>
93 <section>
94 <header><h4>display: inline-grid</h4></header>
95 <section class="sample-view">
96 Here is an inline grid:
97 <span class="inline-grid-container">
98 <div class="inline-grid-item">1</div>
99 <div class="inline-grid-item">2</div>
100 <div class="inline-grid-item">3</div>
101 <div class="inline-grid-item">4</div>
102 </span>
103 This is contained within a paragraph.
104 </section>
105 </section>
106 </article>
107 </main>
108</body>
109</html>গ্রিড লেআউট
গ্রিড
1.grid-box {
2 display: grid;
3 grid-template-columns: 100px 200px auto;
4 grid-template-rows: 100px auto 50px;
5 gap: 10px;
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 border: 2px solid black;
17}গ্রিড হল একটি লেআউট সিস্টেম যা উপাদানগুলিকে দ্বিমাত্রিক সারি এবং কলামে সাজানোর জন্য ব্যবহৃত হয়। গ্রিড ব্যবহার করে আপনি সহজেই এবং নমনীয়ভাবে জটিল লেআউট তৈরি করতে পারেন যা ঐতিহ্যবাহী float বা position পদ্ধতিতে কঠিন ছিল। যেখানে ফ্লেক্সবক্স একমাত্র মাত্রিক লেআউটে দক্ষ, সেখানে গ্রিড দুইমাত্রিক লেআউটের জন্য উপযুক্ত।
gridপ্রদর্শনের প্রোপার্টিতে নির্দিষ্ট করেgrid-boxক্লাস একটি গ্রিড লেআউট প্রয়োগ করে। এই উপাদানটিকে গ্রিড কন্টেইনার বলা হয়।grid-template-columnsপ্রোপার্টি গ্রিড কলামের প্রস্থ নির্ধারণ করে। এই উদাহরণে, প্রথম কলাম 100px, দ্বিতীয় কলাম 200px, এবং তৃতীয় কলাম অবশিষ্ট স্থান (auto) নেয়।grid-template-rowsপ্রোপার্টি গ্রিড সারির উচ্চতা নির্ধারণ করে। প্রথম সারি 100px, দ্বিতীয় সারি স্বয়ংক্রিয় (auto), এবং তৃতীয় সারির উচ্চতা 50px।gapপ্রোপার্টি গ্রিড আইটেমগুলির মধ্যে ব্যবধান নির্ধারণ করে। কলাম এবং সারির মধ্যে 10px ব্যবধান যোগ করা হচ্ছে।
মৌলিক পরিভাষা
- একটি গ্রিড কন্টেইনার হল একটি উপাদান যার
displayপ্রোপার্টিgridসেট করা থাকে এবং এর চাইল্ড উপাদানগুলো গ্রিড আইটেম হয়ে যায়। - গ্রিড আইটেম হল সেই চাইল্ড উপাদানগুলি যেগুলি সরাসরি একটি গ্রিড কন্টেইনারের নিচে থাকে।
মূল গ্রিড প্রোপার্টি
grid-template-columns & grid-template-rows
1.container {
2 grid-template-columns: 1fr 2fr 1fr;
3}grid-template-columnsএবংgrid-template-rowsপ্রোপার্টি প্রতিটি কলাম এবং সারির আকার নির্ধারণ করে।pxএবং%এর মতো ইউনিট, সেইসাথেfr(অনুপাত) যা বাকি স্থান নির্ধারণ করতে ব্যবহৃত হয়, ব্যবহার করা যেতে পারে।- এই উদাহরণে, তিনটি কলাম রয়েছে এবং দ্বিতীয় কলামের প্রস্থ অন্যগুলোর তুলনায় দ্বিগুণ।
grid-column & grid-row
1.container {
2 display: grid;
3 grid-template-columns: repeat(4, 1fr); /* 4 columns */
4 grid-template-rows: repeat(3, 100px); /* 3 rows */
5}
6
7.item {
8 grid-column: 2 / 4;
9 grid-row: 1 / 3;
10}grid-columnএবংgrid-rowনির্ধারণ করে গ্রিড আইটেমটি কোন কলাম বা সারিতে স্থাপন করা হবে।- এই উদাহরণে, আইটেমটি ২য় কলাম থেকে ৪র্থ কলাম এবং ১ম সারি থেকে ৩য় সারি পর্যন্ত বিস্তৃত।
grid-auto-rows & grid-auto-columns
1.container {
2 display: grid;
3 grid-template-rows: 100px 200px; /* Explicitly define 2 rows */
4 grid-template-columns: 1fr 2fr; /* Explicitly define 2 columns */
5 grid-auto-rows: 150px; /* Automatically added rows will be 150px */
6 grid-auto-columns: 100px; /* Automatically added columns will be 100px */
7}
8
9.item {
10 grid-column: 3; /* Positioned in the 3rd column (auto-generated) */
11 grid-row: 3; /* Positioned in the 3rd row (auto-generated) */
12}grid-auto-rowsএবংgrid-auto-columnsপ্রপার্টিগুলি ঐ সারি এবং কলামের আকার নিয়ন্ত্রণ করে যা গ্রিড লেআউট লাইনের বা কলামের স্পষ্টভাবে সংজ্ঞা না থাকলে স্বয়ংক্রিয়ভাবে তৈরি হয়।- এই উদাহরণে, ২টি সারি এবং ২টি কলাম স্পষ্টভাবে সংজ্ঞায়িত করা হয়েছে, তবে আরও উপাদান যোগ করা হলে, নতুন সারি বা কলাম
grid-auto-rowsএবংgrid-auto-columnsঅনুযায়ী স্বয়ংক্রিয়ভাবে তৈরি হবে।
- এই উদাহরণে, ২টি সারি এবং ২টি কলাম স্পষ্টভাবে সংজ্ঞায়িত করা হয়েছে, তবে আরও উপাদান যোগ করা হলে, নতুন সারি বা কলাম
justify-items & align-items
1.container {
2 justify-items: center; /* Center items horizontally */
3 align-items: center; /* Center items vertically */
4}- গ্রিড আইটেমগুলো অনুভূমিকভাবে (
justify-items) এবং উল্লম্বভাবে (align-items) সঙ্গতিপূর্ণ করুন।
grid-area
1/* grid-area syntax
2grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
3*/
4.item {
5 grid-area: 1 / 2 / 3 / 4;
6}grid-areaএকই সাথে নির্দেশ করে যে গ্রিড আইটেমটি গ্রিড কন্টেইনারের কোন স্থানে স্থাপন করা উচিত।- এই উদাহরণে, এটি ১ম সারি থেকে ৩য় সারি এবং ২য় কলাম থেকে ৪র্থ কলাম পর্যন্ত দখলের কথা বোঝায়।
gap
1.container {
2 gap: 10px 20px; /* 10px space between rows, 20px space between columns */
3}gapকলাম এবং সারির মধ্যে ব্যবধান যোগ করে। আপনিcolumn-gapএবংrow-gapব্যবহার করে কলাম এবং সারির মধ্যে ব্যবধান পৃথকভাবে নির্ধারণ করতে পারেন।
grid-auto-flow
1.container {
2 grid-auto-flow: column; /* Add items in the column direction */
3}grid-auto-flowএকটি বৈশিষ্ট্য যা নির্ধারণ করে যে বস্তুগুলি সারি বা কলামের মাধ্যমে কীভাবে স্থাপন করা হবে।
জটিল লেআউটের উদাহরণ।
1.grid-container {
2 display: grid;
3 grid-template-columns: 120px 1fr 80px;
4 grid-template-rows: 50px 1fr 50px;
5 gap: 10px;
6 background-color: transparent;
7 border: none;
8 height: 400px;
9}
10
11.grid-header {
12 grid-column: 1 / 4;
13 background-color: lightblue;
14}
15
16.grid-sidebar {
17 grid-column: 1 / 2;
18 grid-row: 2 / 3;
19 height: 100%;
20 background-color: lightslategray;
21 color: white;
22}
23
24.grid-content {
25 grid-column: 2 / 3;
26 grid-row: 2 / 3;
27 background-color: lightskyblue;
28}
29
30.grid-content p {
31 margin: 0;
32 padding: 0;
33 height: 260px;
34}
35
36.grid-ads {
37 grid-column: 3 / 4;
38 grid-row: 2 / 3;
39 height: 100%;
40 background-color: lightsteelblue;
41}
42
43.grid-footer {
44 grid-column: 1 / 4;
45 background-color: lightgray;
46}এইভাবে, গ্রিড আপনাকে সহজ কোডের মাধ্যমে একটি সম্পূর্ণ ওয়েবপেজ লেআউট তৈরি করতে দেয়।
- এই উদাহরণে, তিনটি কলাম (সাইডবার, প্রধান বিষয়বস্তু, এবং বিজ্ঞাপন) এবং তিনটি সারি (হেডার, বিষয়বস্তু, এবং ফুটার) আছে।
- হেডার এবং ফুটার পুরো পৃষ্ঠার প্রস্থ দখল করে, কেন্দ্রে বিষয়বস্তু থাকে এবং উভয় দিকে সাইডবার ও বিজ্ঞাপন থাকে।
গ্রিডের সুবিধাসমূহ।
গ্রিডের সুবিধাগুলোর মধ্যে নিম্নলিখিত বিষয়গুলো অন্তর্ভুক্ত রয়েছেঃ।
- সহজ দুই-মাত্রিক লেআউটঃ সারি এবং কলামের লেআউট পরিচালনা করা সহজ উপায়ে এমনকি জটিল লেআউটও কম কোড দিয়ে অর্জন করা সম্ভব।
- রেসপন্সিভ ডিজাইনের সাথে সামঞ্জস্যপূর্ণঃ গ্রিড সিস্টেম বিভিন্ন স্ক্রিন সাইজে মানিয়ে নিতে সক্ষম রেসপন্সিভ ডিজাইন তৈরি করা সহজ করে।
gap প্রপার্টি।
1.gap-grid-container {
2 display: grid;
3 grid-template-columns: repeat(3, 1fr);
4 gap: 30px 10px;
5 background-color: transparent;
6 border: none;
7 height: 200px;
8}
9
10.gap-grid-container div {
11 width: 100px;
12 background-color: lightskyblue;
13}
14
15.gap-flex-container {
16 display: flex;
17 gap: 50px;
18}
19
20.gap-flex-container div {
21 width: 80px;
22 background-color: lightgreen;
23}gap প্রপার্টি গ্রিড লেআউট এবং ফ্লেক্সবক্স লেআউটে উপাদানসমূহের মধ্যে ফাঁক (স্পেসিং) নির্ধারণ করতে ব্যবহৃত হয়। এই প্রপার্টি ব্যবহার করে, আপনি সহজেই শিশুপদগুলোর মধ্যে ফাঁক রাখতে পারেন।
gap-grid-containerশ্রেণীতে, প্রতিটি উপাদানের মধ্যে উল্লম্বভাবে30pxএবং অনুভূমিকভাবে10pxদূরত্ব নির্ধারিত হয়েছে।grid-template-columnsব্যবহার করে একটি ৩-কলামের গ্রিড তৈরি করা হয়েছে, এবং প্রতিটি উপাদানের মধ্যে উল্লম্ব ও অনুভূমিক দূরত্ব প্রয়োগ করা হয়।gap-flex-containerশ্রেণীতে ফ্লেক্সবক্সের তিনটি আইটেমের মধ্যে50pxদূরত্ব প্রয়োগ করা হয়।
মূল সিনট্যাক্স
1.container {
2 display: grid; /* or flex */
3 gap: <row-gap> <column-gap>;
4}row-gapসারিগুলির মধ্যে দূরত্ব নির্ধারণ করে। এটি গ্রিড বা ফ্লেক্স লেআউটে উল্লম্ব দূরত্ব।column-gapকলামগুলির মধ্যে দূরত্ব নির্ধারণ করে। এটি অনুভূমিক দূরত্ব।
যদি দুটি মান প্রদান না করা হয়, তাহলে একই মান row-gap এবং column-gap উভয়ের জন্য প্রয়োগ করা হয়।
gap প্রোপার্টির সুবিধাসমূহ
gap প্রোপার্টির সুবিধাগুলি নিম্নরূপ:।
- সহজ গ্যাপ সেটিং: চাইল্ড উপাদানগুলির মধ্যে গ্যাপ সেট করার কোড সহজ হয়ে যায় এবং উপাদানগুলির মধ্যে অতিরিক্ত মার্জিন বা প্যাডিং সেট করার প্রয়োজন দূর করে।
- নমনীয় অভিযোজন: এটি সহজেই রেসপন্সিভ ডিজাইন সমর্থন করে এবং নমনীয় ডিজাইন সমন্বয় করতে দেয়।
grid-template-areas প্রোপার্টি
1.grid-template-areas-container {
2 display: grid;
3 grid-template-columns: 1fr 2fr; /* 2 columns */
4 grid-template-rows: auto auto; /* 2 rows */
5 grid-template-areas:
6 "header header"
7 "sidebar content"
8 "footer footer"; /* In the 3rd row, the footer spans across */
9 gap: 10px;
10 height: 250px;
11}
12
13.grid-template-areas-container div {
14 width: 100%;
15 height: 100%;
16}
17
18.grid-template-areas-header {
19 grid-area: header; /* Placed in the "header" area */
20 background-color: lightblue;
21}
22
23.grid-template-areas-sidebar {
24 grid-area: sidebar; /* Placed in the "sidebar" area */
25 background-color: lightslategray;
26}
27
28.grid-template-areas-content {
29 grid-area: content; /* Placed in the "content" area */
30 background-color: lightskyblue;
31}
32
33.grid-template-areas-footer {
34 grid-area: footer; /* Placed in the "footer" area */
35 background-color: lightsteelblue;
36}grid-template-areas প্রোপার্টি একটি গ্রিড কন্টেইনারের মধ্যে অঞ্চলগুলির নামকরণের উপায় সরবরাহ করে এবং সেই নামগুলি ব্যবহার করে সহজেই গ্রিড উপাদানগুলিকে অবস্থান নির্ধারণ করতে দেয়। এই প্রোপার্টি ব্যবহার করে ভিজ্যুয়ালি সহজবোধ্য লেআউট সংজ্ঞা দেওয়া সম্ভব।
grid-template-areas প্রোপার্টিতে নির্ধারিত নামযুক্ত অঞ্চলে অবস্থিত উপাদানগুলিকে grid-area প্রোপার্টি দিয়ে একই নাম বরাদ্দ করতে হবে। উপাদানগুলি একাধিক সেলের উপর বিস্তার করলেও, এগুলি স্বয়ংক্রিয়ভাবে সঠিকভাবে অবস্থান নির্ধারণ করে।
এই উদাহরণে, গ্রিড নিম্নরূপ তৈরি করা হয়েছে:।
- প্রথম সারিতে, "header" দুটি কলামের উপর স্থাপন করা হয়েছে।
- দ্বিতীয় সারিতে, "Sidebar" বামে এবং "content" ডানে স্থাপন করা হয়েছে।
- তৃতীয় সারিতে, "Footer" দুটি কলামের উপর স্থাপন করা হয়েছে।
প্রাথমিক ব্যবহার
1grid-template-areas:
2 "area1 area2 area3"
3 "area1 area4 area5";grid-template-areas প্রোপার্টিতে প্রতিটি সারির জন্য অঞ্চলের নাম নির্দিষ্ট করা হয়েছে। নির্ধারিত নামের অঞ্চলগুলিতে উপাদান স্থাপন করে আপনি সহজেই লেআউট তৈরি করতে পারেন।
- এই উদাহরণে, ২ সারি এবং ৩ কলামের একটি গ্রিড তৈরি করা হয়েছে এবং প্রতিটি সেলের নাম রাখা হয়েছে area1, area2, ইত্যাদি।
ফাঁকা সেলসমূহ নির্ধারণ করার জন্য . ব্যবহার করা হচ্ছে
1grid-template-areas:
2 "header header header"
3 "sidebar . content"
4 "footer footer footer";যদি আপনি আপনার লেআউটে ফাঁকা সেল চান, আপনি একটি . (ডট) ব্যবহার করে ফাঁকা সেল প্রকাশ করতে পারেন।
- এই উদাহরণের মতো, যদি আপনি sidebar এবং content এর মধ্যে একটি . নির্ধারণ করেন, তবে দ্বিতীয় কলামটি ফাঁকা হয়ে যাবে।
grid-template-areas প্রপার্টির সুবিধাগুলি
grid-template-areas প্রপার্টির সুবিধাগুলোর মধ্যে নিম্নলিখিত বিষয়গুলি অন্তর্ভুক্ত রয়েছে।
- ভিজ্যুয়াল লেআউট: এটি আপনাকে লেআউটকে ভিজ্যুয়ালি প্রকাশ করতে দেয়, যা ডিজাইনটি বোঝা সহজ করে তোলে।
- সহজ এলিমেন্ট স্থানান্তর: আপনি HTML পরিবর্তন না করেও CSS-এ এরিয়া সংজ্ঞাগুলি পরিবর্তন করে এলিমেন্ট লেআউট সহজেই সামঞ্জস্য করতে পারেন।
নোটস
grid-template-areas প্রপার্টি ব্যবহার করার সময়, নিম্নলিখিত বিষয়গুলিতে মনোযোগ দেওয়া জরুরি।
- প্রত্যেক সারির নামগুলোর সংখ্যা অবশ্যই নির্ধারিত কলামের সংখ্যার সাথে মিলে যেতে হবে।
- একই নাম একাধিক সেলে নির্ধারণ করলে সেগুলি একত্রিত হয়ে যাবে, তবে এটি বিভিন্ন সারি বা কলামে নির্ধারণ করলে এরিয়া অবশ্যই বর্গাকার হতে হবে।
inline-grid
1.inline-grid-container {
2 display: inline-grid;
3 grid-template-columns: 1fr 1fr;
4 gap: 5px;
5 background-color: lightblue;
6}
7.inline-grid-item {
8 background-color: lightskyblue;
9 width: 50px;
10 padding: 0;
11 margin: 0;
12}inline-grid হল CSS-এ display প্রপার্টির মধ্যে একটি মান। এই প্রপার্টি প্রয়োগ করলে এলিমেন্টটি একটি ইনলাইন-স্তরের কন্টেইনার হিসেবে কাজ করে এবং অভ্যন্তরীণভাবে একটি গ্রিড ফর্ম্যাটিং প্রসঙ্গ তৈরি করে। display: grid এর থেকে ভিন্ন, এটি ডকুমেন্ট ফ্লোতে ইনলাইন এলিমেন্ট হিসেবে কাজ করে।
inline-grid এর ব্যবহার ক্ষেত্র
inline-grid তেমন প্রচলিত নয় যেমন grid, তবে এটি নির্দিষ্ট পরিস্থিতিতে কার্যকরভাবে ব্যবহার করা যেতে পারে।
-
ইনলাইন প্রসঙ্গের মধ্যে গ্রিড: এটি উপকারী যখন আপনি টেক্সট সামগ্রী বা অন্যান্য ইনলাইন এলিমেন্টের পাশে একটি গ্রিড স্থাপন করতে চান। উদাহরণস্বরূপ, এটি কার্যকর যখন বোতাম, ব্যাজ, লেবেল ইত্যাদির জন্য একটি গ্রিড কাঠামো প্রয়োজন, তবে আপনি টেক্সট ফ্লো ব্যাহত না করে ইনলাইন প্রদর্শন করতে চান।
-
ইনলাইন এলিমেন্টে লেআউট নিয়ন্ত্রণ: এমনকি লিংক, বোতাম বা স্প্যানের মতো ইনলাইন এলিমেন্টে জটিল লেআউট প্রয়োজন হলেও,
inline-gridব্লক প্রদর্শন এড়িয়ে একটি গ্রিড লেআউট দিয়ে অভ্যন্তরীণ কাঠামো পরিচালনা করতে পারে।
1<button class="inline-grid">
2 <span>Icon</span>
3 <span>Text</span>
4</button>এই ক্ষেত্রে, বোতামটি একটি গ্রিডে আইকন এবং টেক্সট প্রদর্শন করে, কিন্তু ডকুমেন্ট ফ্লোতে ইনলাইন অবস্থানেই থাকে।
- রেসপন্সিভ ইনলাইন উপাদান:
inline-gridছোট উপাদানের জন্য ব্যবহার করা যেতে পারে, যা ইনলাইন সামগ্রীর অংশ এবং একটি গ্রিড লেআউট প্রয়োজন। উদাহরণস্বরূপ, এটি ইনলাইন ফর্ম, ব্যাজ, পণ্য লেবেল ইত্যাদির জন্য উপযুক্ত, যেখানে আপনি গ্রিড দিয়ে লেআউট সামঞ্জস্য করতে চান কিন্তু এটি ইনলাইন রাখবেন।
inline-grid এর অ্যলাইমেন্ট এবং সাইজিং
1.inline-grid {
2 display: inline-grid;
3 vertical-align: middle;
4}- অন্যান্য ইনলাইন এলিমেন্টের মতো,
inline-gridঘিরে থাকা সামগ্রীর সাথে সম্পর্কিত উল্লম্ব নির্যাসকে সম্মান করে। আপনিvertical-alignপ্রপার্টি ব্যবহার করে গ্রিডের অ্যলাইমেন্ট নিয়ন্ত্রণ করতে পারেন।
1.inline-grid {
2 display: inline-grid;
3 width: 200px;
4 height: 100px;
5}- আকার সম্পর্কে, একটি
inline-gridএলিমেন্ট শুধুমাত্র তার গ্রিড কনটেন্টের প্রয়োজনীয় প্রস্থটি দখল করে। প্রয়োজন হলে, আপনি প্রস্থ, উচ্চতা, এবং সর্বনিম্ন/সর্বাধিক মাত্রাগুলি স্পষ্টভাবে নির্ধারণ করতে পারেন।
1.inline-grid {
2 display: inline-grid;
3 grid-template-columns: auto 1fr;
4}গ্রিডটির বিন্যাস নিজেই inline-grid কন্টেইনারের আকৃতি নির্ধারণ করতে পারে, এবং এই প্রবণতা আরও শক্তিশালী হয় যখন ফ্লেক্সিবল ইউনিট যেমন fr, auto, এবং শতাংশ ব্যবহার করা হয়।
আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।