एक व्यावहारिक समस्या के साथ इन आधुनिक सीएसएस लेआउट विधियों के बीच अंतर का पता लगाएं: कॉलम को पंक्तिबद्ध करना।
जब सीएसएस लेआउट की बात आती है, तो आपके पास दो मुख्य उपकरण ग्रिड और फ्लेक्सबॉक्स हैं। हालाँकि दोनों लेआउट बनाने में अद्भुत हैं, वे अलग-अलग उद्देश्यों की पूर्ति करते हैं और उनकी ताकत और कमजोरियाँ अलग-अलग हैं।
जानें कि दोनों लेआउट विधियाँ कैसे व्यवहार करती हैं और कब एक का दूसरे के ऊपर उपयोग करना है।
सीएसएस फ्लेक्सबॉक्स और ग्रिड का अलग व्यवहार
चीजों की कल्पना करने में मदद के लिए, एक बनाएं Index.html अपने पसंदीदा फ़ोल्डर में फ़ाइल करें और निम्नलिखित मार्कअप में पेस्ट करें:
html>
<htmllang="en">
<head>
<linkrel="stylesheet"href="style.css">
head><body>
<h1>Flexbox vs Gridh1>
<h2>Flexbox:h2><divclass="flex-container">
<div>Lorem.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
div><h2>Grid:h2>
<divclass="grid-container">
<div>Lorem.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
div>
body>
html>
दोनों डिव में बिल्कुल एक जैसे बच्चे हैं इसलिए आप प्रत्येक के लिए एक अलग प्रणाली लागू कर सकते हैं और उनकी तुलना कर सकते हैं।
आप यह भी देख सकते हैं कि HTML नामक स्टाइल शीट फ़ाइल आयात करता है स्टाइल.सीएसएस. इस फ़ाइल को उसी फ़ोल्डर में बनाएँ Index.html और इसमें निम्नलिखित शैलियाँ चिपकाएँ:
body {
padding: 30px;
}h1 {
color: #A52A2A;
}h2 {
font-size: large;
}
div:not([class]) {
outline: 2pxsolidblack;
padding: 0.5em;
}
आपका पेज इस तरह दिखना चाहिए:
अब, पहले की ओर मुड़ें एक फ्लेक्स कॉलम में, बस निम्नलिखित कोड को अपनी स्टाइल शीट में जोड़ें:
.flex-container {
display: flex;
}
यह परिणाम है:
फ्लेक्स-कंटेनर div अब अपने चाइल्ड तत्वों को कॉलम में रखता है। ये कॉलम लचीले और प्रतिक्रियाशील हैं - वे व्यूपोर्ट में उपलब्ध स्थान के आधार पर अपनी चौड़ाई को अनुकूलित करते हैं। यह व्यवहार मुख्य में से एक है फ्लेक्सबॉक्स के पीछे बुनियादी अवधारणाएँ.
में अतिप्रवाहित स्तंभों को रोकने के लिए फ्लेक्स-कंटेनर, आप उपयोग कर सकते हैं फ्लेक्स-रैप संपत्ति:
.flex-container {
display: flex;
flex-wrap: wrap;
}
यदि बाल तत्वों के लिए एक पंक्ति में फिट होने के लिए पर्याप्त जगह नहीं है, तो वे अब चारों ओर लपेटेंगे और अगली पंक्ति में जारी रहेंगे।
अब दूसरे पर ग्रिड लेआउट लागू करें इस सीएसएस का उपयोग करना:
.grid-container {
display: grid;
}
अकेले उपरोक्त घोषणा से कुछ नहीं होगा क्योंकि ग्रिड का डिफ़ॉल्ट व्यवहार ऐसी पंक्तियाँ बनाता है जो एक दूसरे के ऊपर खड़ी हो जाती हैं।
कॉलम डिस्प्ले पर स्विच करने के लिए, आपको इसे बदलना होगा ग्रिड-ऑटो-प्रवाह संपत्ति (जो है पंक्ति डिफ़ॉल्ट रूप से):
.grid-container {
display: grid;
grid-auto-flow: column;
}
अब यहाँ परिणाम है:
प्रत्येक पंक्ति पर इच्छित कॉलमों की सटीक संख्या निर्दिष्ट करने के लिए, इसका उपयोग करें ग्रिड-टेम्पलेट-कॉलम:
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
यह मान पाँच समान-चौड़ाई वाले कॉलम बनाता है। फ्लेक्सबॉक्स के समान रैपिंग व्यवहार प्राप्त करने के लिए, आप प्रतिक्रियाशील गुणों का उपयोग कर सकते हैं स्वत: फ़िट और न्यूनतम अधिकतम:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, min-max(300px, 1fr));
}
आप अक्सर फ्लेक्सबॉक्स और ग्रिड को क्रमशः एक-आयामी और दो-आयामी कहते हुए सुनेंगे। हालाँकि, यह पूर्ण सत्य नहीं है, क्योंकि फ्लेक्सबॉक्स और ग्रिड दोनों एक बना सकते हैं द्वि-आयामी लेआउट प्रणाली. वे इसे अलग-अलग तरीकों से, अलग-अलग बाधाओं के साथ करते हैं।
जो सबसे महत्वपूर्ण है वह वह तरीका है जिससे आप लेआउट के एक-आयामी पहलू को नियंत्रित कर सकते हैं। उदाहरण के लिए, निम्नलिखित छवि पर विचार करें:
देखें कि ग्रिड कॉलम कितना सुसंगत है और फ्लेक्सबॉक्स में प्रत्येक कॉलम कितना असमान है। फ्लेक्स कंटेनर में प्रत्येक पंक्ति/स्तंभ दूसरे से स्वतंत्र है। इसलिए कुछ अपनी सामग्री के आकार के आधार पर दूसरों से बड़े हो सकते हैं। ये स्तंभों की तरह कम और स्वतंत्र ब्लॉकों की तरह अधिक हैं।
डिफ़ॉल्ट रूप से लॉक किए गए कॉलम के साथ 2D ग्रिड सेट करके, ग्रिड अलग तरीके से काम करता है। छोटे टेक्स्ट वाले कॉलम का आकार बहुत लंबे टेक्स्ट वाले कॉलम के समान होगा, जैसा कि ऊपर दी गई छवि से पता चलता है।
संक्षेप में, सीएसएस ग्रिड थोड़ा अधिक संरचित है, जबकि फ्लेक्सबॉक्स थोड़ा अधिक संरचित है लचीला और उत्तरदायी लेआउट सिस्टम. इन वैकल्पिक लेआउट प्रणालियों को अच्छी तरह से नामित किया गया है!
फ्लेक्सबॉक्स का उपयोग कब करें
क्या आप प्रत्येक कॉलम/पंक्ति के आंतरिक आकार पर भरोसा करना चाहते हैं, जैसा कि उनकी सामग्री द्वारा परिभाषित किया गया है? या क्या आप माता-पिता के दृष्टिकोण से संरचित नियंत्रण चाहते हैं? यदि आपका उत्तर पहला है, तो फ्लेक्सबॉक्स आपके लिए सही समाधान है।
इसे प्रदर्शित करने के लिए, एक क्षैतिज नेविगेशन मेनू पर विचार करें। मार्कअप को अंदर बदलें इसके साथ टैग करें:
<h1>Flexbox vs. Gridh1><headerclass="flex">
<h2>Flexboxh2><nav>
<ulclass="nav-list">
<li><ahref="">Homea>li>
<li><ahref="">About Usa>li>
<li><ahref="">Service Information Goes Herea>li>
<li><ahref="">Blog Contacta>li>
<li><ahref="">a>li>
ul>
nav>
header><headerclass="grid">
<h2>Gridh2>
<nav>
<ulclass="nav-list">
<li><ahref="">Homea>li>
<li><ahref="">About Usa>li>
<li><ahref="">Service Information Goes Herea>li>
<li><ahref="">Blog Contacta>li>
<li><ahref="">a>li>
ul>
nav>
header>
CSS फ़ाइल में मार्कअप को इसके साथ बदलें:
.nav-list {
list-style: none;
margin: 0;
padding: 0;
}header {
--border-width: 5px;
border: var(--border-width) solidblack;
margin-bottom: 30px;
}header > *:first-child {
border: var(--border-width) solid#FFC0CB;
margin: 0;
}
li {
border: var(--border-width) solid#90EE90;
}
यहाँ परिणाम है:
अब, निम्नलिखित सीएसएस जोड़कर पहले नेविगेशन को फ्लेक्स लेआउट में और दूसरे को ग्रिड लेआउट में बदलें:
.flex.nav-list {
display: flex;
gap: 1em;
flex-wrap: wrap;
}
.grid.nav-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
यह देखने के लिए परिणामों की तुलना करें कि कौन सा अधिक उपयुक्त था:
उपरोक्त छवि से, आप देख सकते हैं कि फ्लेक्सबॉक्स इस मामले में सही समाधान है। आपके पास ऐसे आइटम हैं जिन्हें आप एक-दूसरे के बगल में रखना चाहते हैं और उनका आंतरिक आकार (पाठ की लंबाई के आधार पर बड़ा या छोटा) बनाए रखना चाहते हैं। ग्रिड के साथ, प्रत्येक सेल की एक निश्चित चौड़ाई होती है, और यह उतनी अच्छी नहीं लगती - कम से कम सादे पाठ लिंक के साथ।
CSS ग्रिड का उपयोग कब करें
एक जगह जहां ग्रिड वास्तव में उत्कृष्टता प्राप्त करता है वह तब होता है जब आप मूल से एक कठोर प्रणाली बनाना चाहते हैं। एक उदाहरण कार्ड तत्वों का एक सेट है जो समान रूप से विस्तृत होना चाहिए, भले ही उनमें अलग-अलग मात्रा में सामग्री हो।
मार्कअप को अंदर बदलें इसके साथ टैग करें:
<h1>Flexbox vs. Gridsh1><sectionclass="cards">
<h2>Some cardsh2><divclass="columns">
<articleclass="card">
<h3class="card__title">Fun Stuffh3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.p><ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
ul>
article><articleclass="card">
<h3class="card__title">Fun Stuffh3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.p><ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
ul>
article><articleclass="card">
<h3class="card__title">A Longer Title Than Othersh3><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere
excepturi sit ea dolores totam veniam qui voluptates commodi,
perferendis et!p>
<ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
ul>
article>
div>
section>
यह सीएसएस जोड़ें:
.columns {
display: flex;
gap: 1em;
}article {
background-color: #90EE90;
color: black;
padding: 15px;
}
ul {
background-color: white;
padding: 2px;
list-style: none;
}
यह देखने के लिए कि यह कैसा दिखता है, आप फ्लेक्सबॉक्स डिस्प्ले से शुरुआत कर रहे हैं, ताकि आप इसकी तुलना ग्रिड डिस्प्ले से कर सकें। यहाँ आउटपुट है:
ध्यान दें कि कैसे अंतिम कॉलम अपने आंतरिक आकार के कारण दूसरों की तुलना में बड़ा है, जिसे फ्लेक्सबॉक्स अच्छी तरह से संभालता है। लेकिन फ्लेक्सबॉक्स का उपयोग करके उन्हें समान चौड़ाई बनाने के लिए, आपको निम्नलिखित जोड़कर उस आंतरिक आकार के विरुद्ध जाना होगा:
.columns > * {
flex: 1;
}
यह चाल है. लेकिन ग्रिड इस तरह के मामलों के लिए बेहतर अनुकूल है। आप बस स्तंभों की संख्या निर्दिष्ट करें, और आप जाने के लिए तैयार हैं:
.columns {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1em;
}
यहाँ परिणाम है:
ग्रिड का उपयोग करने का एक अन्य लाभ यह है कि माता-पिता बच्चों के लेआउट को नियंत्रित कर रहे हैं। तो आप लेआउट को तोड़ने की चिंता किए बिना बाल तत्वों को जोड़ और हटा सकते हैं।
तो आपको ग्रिड या फ्लेक्सबॉक्स का उपयोग कब करना चाहिए?
संक्षेप में, सीएसएस ग्रिड तब बहुत अच्छा होता है जब आप माता-पिता के दृष्टिकोण से एक संरचित नियंत्रण चाहते हैं, जिसमें व्यक्तिगत सामग्री के आकार की परवाह किए बिना समान आकार के कॉलम होते हैं।
दूसरी ओर, फ्लेक्सबॉक्स तब आदर्श है जब आप तत्वों के आंतरिक आकार के आधार पर अधिक लचीली प्रणाली चाहते हैं।
