फ्लेक्सबॉक्स, ग्रिड, और कॉलम लेआउट्स की तुलना
यह लेख फ्लेक्सबॉक्स, ग्रिड, और कॉलम लेआउट्स के बीच तुलना को समझाता है।
आप फ्लेक्सबॉक्स, ग्रिड, और कॉलम लेआउट्स के बीच के अंतर और प्रत्येक का उपयोग कब करना है, यह सीखेंगे।
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 स्रोत क्रम का पालन करता है, जिससे एलिमेंट्स के क्रम को नियंत्रित करने के लिए यह कम उपयुक्त हो जाता है।
फायदे
- लंबे टेक्स्ट को स्वचालित रूप से विभाजित कर सकता है।
- आप बहुत आसानी से अखबार-शैली लेआउट बना सकते हैं।
तुलनात्मक तालिका
| सुविधा / उपयोग मामला | फ्लेक्सबॉक्स | ग्रिड | स्तंभ |
|---|---|---|---|
| लेआउट आयाम | 1D (क्षैतिज या ऊर्ध्वाधर) | 2D (क्षैतिज और ऊर्ध्वाधर) | 1D (ऊर्ध्वाधर) |
| श्रेष्ठ के लिए | घटक संरेखण | पूरे पृष्ठ की संरचना | बहु-स्तंभ पाठ |
| लेआउट लचीलापन | उच्च (क्रम और आकार) | बहुत उच्च (क्षेत्र परिभाषा) | कम (केवल स्वचालित-विभाजन) |
| बालक का नियंत्रण | लचीला | स्पष्ट रूप से परिभाषित | नियंत्रित करना कठिन |
| लेआउट उद्देश्य | सामग्री-प्रेरित | लेआउट-प्रेरित | पाठ-प्रेरित |
सारांश
- फ्लेक्सबॉक्स आदर्श है जब आप तत्वों को एक पंक्ति में संरेखित करना चाहते हैं, जैसे हेडर या कार्ड सूचियां।
- ग्रिड उपयुक्त है जब आप पूरे लेआउट को डिज़ाइन करना चाहते हैं, जैसे एक वेब पृष्ठ की संरचना।
- स्तंभ सबसे अच्छे हैं जब आप पाठ को कई स्तंभों में स्वरूपित करना चाहते हैं, जैसे लेख या ब्लॉग में।
आप इन्हें आवश्यकता अनुसार मिलाकर भी उपयोग कर सकते हैं। उदाहरण के लिए, आप ग्रिड के साथ समग्र लेआउट डिज़ाइन कर सकते हैं और आंतरिक तत्वों को फ्लेक्स द्वारा संरेखित कर सकते हैं।
आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।