इस अध्याय में, आप विभिन्न CSS लेआउट तकनीकों के बारे में जानेंगे, जो आपके वेब पेज के डिज़ाइन और लेआउट को नियंत्रित करने में मदद करेंगी। आप डिस्प्ले प्रॉपर्टी, पोजीशनिंग (स्टैटिक, रिलेटिव, एब्सोल्यूट, फिक्स्ड), फ्लोट और क्लियर, फ्लेक्सबॉक्स, और CSS ग्रिड के बारे में विस्तार से जानेंगे। इन तकनीकों का सही उपयोग करके, आप अपने वेब पेज को अधिक आकर्षक, लचीला, और उपयोगकर्ता के अनुकूल बना सकते हैं। इस अध्याय के अंत तक, आप विभिन्न लेआउट तकनीकों का उपयोग करके अपने वेब प्रोजेक्ट्स को पेशेवर ढंग से डिज़ाइन करने में सक्षम होंगे। चलिए, लेआउट तकनीकों की इस रोमांचक यात्रा की शुरुआत करते हैं।
डिस्प्ले प्रॉपर्टी (Display Property)
डिस्प्ले प्रॉपर्टी का परिचय (Introduction to Display Property)
डिस्प्ले प्रॉपर्टी CSS की एक महत्वपूर्ण प्रॉपर्टी है जो यह नियंत्रित करती है कि किसी HTML एलिमेंट को वेब पेज पर कैसे प्रदर्शित किया जाएगा। यह प्रॉपर्टी एलिमेंट के लेआउट और उसके आस-पास के अन्य एलिमेंट्स के साथ उसके इंटरैक्शन को निर्धारित करती है। डिस्प्ले प्रॉपर्टी का सही उपयोग करके, आप अपने वेब पेज के लेआउट को अधिक नियंत्रण में रख सकते हैं और इसे बेहतर ढंग से स्टाइल कर सकते हैं।
डिस्प्ले प्रॉपर्टी के प्रकार (Types of Display Property)
डिस्प्ले प्रॉपर्टी के कई प्रकार होते हैं, जिनमें से कुछ प्रमुख प्रकार निम्नलिखित हैं:
- block: एलिमेंट को ब्लॉक-लेवल एलिमेंट के रूप में प्रदर्शित करता है। यह पूरी चौड़ाई लेता है और नई लाइन पर शुरू होता है।
div {
display: block;
}- inline: एलिमेंट को इनलाइन एलिमेंट के रूप में प्रदर्शित करता है। यह केवल उतनी ही चौड़ाई लेता है जितनी इसकी सामग्री होती है और नई लाइन पर शुरू नहीं होता।
span {
display: inline;
}- inline-block: एलिमेंट को इनलाइन-ब्लॉक एलिमेंट के रूप में प्रदर्शित करता है। यह इनलाइन एलिमेंट की तरह व्यवहार करता है, लेकिन ब्लॉक एलिमेंट की तरह चौड़ाई और ऊंचाई सेट की जा सकती है।
img {
display: inline-block;
}- none: एलिमेंट को प्रदर्शित नहीं करता। यह पेज पर दिखाई नहीं देता और उसके स्थान पर कोई स्थान नहीं लेता।
.hidden {
display: none;
}- flex: एलिमेंट को फ्लेक्स कंटेनर के रूप में प्रदर्शित करता है, जो फ्लेक्सबॉक्स लेआउट का उपयोग करता है।
.container {
display: flex;
}- grid: एलिमेंट को ग्रिड कंटेनर के रूप में प्रदर्शित करता है, जो CSS ग्रिड लेआउट का उपयोग करता है।
.grid-container {
display: grid;
}डिस्प्ले प्रॉपर्टी का उपयोग (Using Display Property)
डिस्प्ले प्रॉपर्टी का उपयोग करने के लिए, आप CSS में संबंधित एलिमेंट के लिए display प्रॉपर्टी सेट कर सकते हैं। यह प्रॉपर्टी विभिन्न लेआउट्स के बीच आसानी से स्विच करने की अनुमति देती है और आपके वेब पेज को अधिक लचीला बनाती है।
उदाहरण:
div {
display: block;
}
span {
display: inline;
}
img {
display: inline-block;
}
.hidden {
display: none;
}
.container {
display: flex;
}
.grid-container {
display: grid;
}उदाहरण (Examples)
नीचे दिए गए उदाहरणों के माध्यम से हम देखेंगे कि डिस्प्ले प्रॉपर्टी का उपयोग कैसे किया जाता है।
उदाहरण:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>डिस्प्ले प्रॉपर्टी के उदाहरण</title>
<style>
.block {
display: block;
background-color: lightblue;
margin: 10px 0;
}
.inline {
display: inline;
background-color: lightgreen;
margin: 10px;
}
.inline-block {
display: inline-block;
background-color: lightcoral;
width: 100px;
height: 100px;
margin: 10px;
}
.none {
display: none;
}
.flex-container {
display: flex;
background-color: lightgrey;
}
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
background-color: lightyellow;
}
.grid-item {
background-color: lightpink;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>डिस्प्ले प्रॉपर्टी के उदाहरण</h1>
<div class="block">यह एक ब्लॉक एलिमेंट है</div>
<span class="inline">यह एक इनलाइन एलिमेंट है</span>
<span class="inline">यह भी एक इनलाइन एलिमेंट है</span>
<div class="inline-block">यह एक इनलाइन-ब्लॉक एलिमेंट है</div>
<div class="none">यह एलिमेंट डिस्प्ले नहीं होगा</div>
<div class="flex-container">
<div>फ्लेक्स आइटम 1</div>
<div>फ्लेक्स आइटम 2</div>
<div>फ्लेक्स आइटम 3</div>
</div>
<div class="grid-container">
<div class="grid-item">ग्रिड आइटम 1</div>
<div class="grid-item">ग्रिड आइटम 2</div>
<div class="grid-item">ग्रिड आइटम 3</div>
</div>
</body>
</html>See the Pen Untitled by arun geek (@arun-geek) on CodePen.
पोजीशनिंग (स्टैटिक, रिलेटिव, एब्सोल्यूट, फिक्स्ड) (Positioning: Static, Relative, Absolute, Fixed)
पोजीशनिंग का परिचय (Introduction to Positioning)
CSS में पोजीशनिंग का उपयोग वेब पेज के एलिमेंट्स को सटीक रूप से स्थानांतरित करने और उन्हें अन्य एलिमेंट्स के सापेक्ष स्थिति देने के लिए किया जाता है। पोजीशनिंग के माध्यम से आप यह नियंत्रित कर सकते हैं कि कोई एलिमेंट पेज पर कहां और कैसे दिखाई देगा। CSS में चार मुख्य प्रकार की पोजीशनिंग होती हैं: स्टैटिक, रिलेटिव, एब्सोल्यूट, और फिक्स्ड।
स्टैटिक पोजीशनिंग (Static Positioning)
स्टैटिक पोजीशनिंग डिफ़ॉल्ट पोजीशनिंग विधि है, जिसमें एलिमेंट वेब पेज पर अपनी सामान्य स्थिति में रहता है। इसमें कोई विशेष पोजीशनिंग नहीं होती और यह पेज पर एलिमेंट्स को उनके दस्तावेज़ क्रम में प्रदर्शित करता है।
div {
position: static;
}रिलेटिव पोजीशनिंग (Relative Positioning)
रिलेटिव पोजीशनिंग का उपयोग करके एलिमेंट को उसकी सामान्य स्थिति से सापेक्ष स्थानांतरित किया जा सकता है। आप top, right, bottom, और left प्रॉपर्टीज़ का उपयोग करके इसे स्थानांतरित कर सकते हैं।
div {
position: relative;
top: 10px;
left: 20px;
}एब्सोल्यूट पोजीशनिंग (Absolute Positioning)
एब्सोल्यूट पोजीशनिंग का उपयोग करके एलिमेंट को उसके निकटतम सापेक्षित एलिमेंट के सापेक्ष स्थानांतरित किया जा सकता है। यदि कोई सापेक्षित एलिमेंट नहीं है, तो इसे पूरे वेब पेज के सापेक्ष पोजीशन किया जाता है।
div {
position: absolute;
top: 50px;
left: 100px;
}फिक्स्ड पोजीशनिंग (Fixed Positioning)
फिक्स्ड पोजीशनिंग का उपयोग करके एलिमेंट को वेब पेज के व्यूपोर्ट (दृश्य क्षेत्र) के सापेक्ष स्थिर रूप से स्थानांतरित किया जा सकता है। यह एलिमेंट स्क्रॉलिंग के साथ नहीं हिलता और हमेशा अपने निर्दिष्ट स्थान पर रहता है।
div {
position: fixed;
top: 0;
right: 0;
}पोजीशनिंग के उदाहरण (Examples of Positioning)
नीचे दिए गए उदाहरणों के माध्यम से हम देखेंगे कि विभिन्न प्रकार की पोजीशनिंग का उपयोग कैसे किया जाता है।
उदाहरण:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>पोजीशनिंग के उदाहरण</title>
<style>
.static {
position: static;
background-color: lightblue;
padding: 10px;
margin: 10px;
}
.relative {
position: relative;
top: 10px;
left: 20px;
background-color: lightgreen;
padding: 10px;
margin: 10px;
}
.absolute-container {
position: relative;
background-color: lightyellow;
padding: 50px;
}
.absolute {
position: absolute;
top: 20px;
left: 30px;
background-color: lightcoral;
padding: 10px;
}
.fixed {
position: fixed;
top: 0;
right: 0;
background-color: lightgrey;
padding: 10px;
}
</style>
</head>
<body>
<h1>पोजीशनिंग के उदाहरण</h1>
<div class="static">यह एक स्टैटिक पोजीशनिंग एलिमेंट है</div>
<div class="relative">यह एक रिलेटिव पोजीशनिंग एलिमेंट है</div>
<div class="absolute-container">
यह एक एब्सोल्यूट पोजीशनिंग कंटेनर है
<div class="absolute">यह एक एब्सोल्यूट पोजीशनिंग एलिमेंट है</div>
</div>
<div class="fixed">यह एक फिक्स्ड पोजीशनिंग एलिमेंट है</div>
</body>
</html>See the Pen Untitled by arun geek (@arun-geek) on CodePen.
फ्लोट और क्लियर (Float and Clear)
फ्लोट का परिचय (Introduction to Float)
फ्लोट प्रॉपर्टी का उपयोग वेब पेज पर किसी एलिमेंट को बाईं या दाईं ओर स्थानांतरित करने के लिए किया जाता है, जिससे अन्य टेक्स्ट और एलिमेंट्स उसके चारों ओर प्रवाहित हो सकें। यह प्रॉपर्टी अक्सर वेब पेज के लेआउट और डिज़ाइन को नियंत्रित करने के लिए उपयोग की जाती है।
फ्लोट का उपयोग (Using Float)
फ्लोट का उपयोग करके आप किसी एलिमेंट को बाईं या दाईं ओर स्थानांतरित कर सकते हैं। float प्रॉपर्टी के निम्नलिखित मान होते हैं:
- left: एलिमेंट को बाईं ओर स्थानांतरित करता है।
- right: एलिमेंट को दाईं ओर स्थानांतरित करता है।
- none: डिफ़ॉल्ट मान, एलिमेंट को फ्लोट नहीं करता।
उदाहरण:
div {
float: left;
}
img {
float: right;
}क्लियर का परिचय (Introduction to Clear)
क्लियर प्रॉपर्टी का उपयोग किसी एलिमेंट को फ्लोटेड एलिमेंट्स के पास में स्थित होने से रोकने के लिए किया जाता है। यह प्रॉपर्टी सुनिश्चित करती है कि फ्लोटेड एलिमेंट्स के बाद अन्य एलिमेंट्स साफ़ (clear) हो जाएं और किसी नई लाइन पर शुरू हों।
फ्लोट और क्लियर के उदाहरण (Examples of Float and Clear)
नीचे दिए गए उदाहरणों के माध्यम से हम देखेंगे कि फ्लोट और क्लियर का उपयोग कैसे किया जाता है।
उदाहरण:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>फ्लोट और क्लियर के उदाहरण</title>
<style>
.float-left {
float: left;
width: 200px;
height: 100px;
margin: 10px;
background-color: lightblue;
}
.float-right {
float: right;
width: 200px;
height: 100px;
margin: 10px;
background-color: lightgreen;
}
.clear-both {
clear: both;
background-color: lightcoral;
padding: 20px;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>फ्लोट और क्लियर के उदाहरण</h1>
<div class="float-left">यह एक बाईं ओर फ्लोटेड एलिमेंट है</div>
<div class="float-right">यह एक दाईं ओर फ्लोटेड एलिमेंट है</div>
<div class="clear-both">यह एक क्लियर एलिमेंट है जो दोनों फ्लोटेड एलिमेंट्स के बाद साफ़ हो गया है</div>
</body>
</html>इन उदाहरणों में, हमने float और clear प्रॉपर्टीज़ का उपयोग करके एलिमेंट्स को फ्लोट और क्लियर किया है। float प्रॉपर्टी का उपयोग करके आप किसी एलिमेंट को बाईं या दाईं ओर स्थानांतरित कर सकते हैं, जबकि clear प्रॉपर्टी का उपयोग करके आप सुनिश्चित कर सकते हैं कि फ्लोटेड एलिमेंट्स के बाद अन्य एलिमेंट्स साफ़ हो जाएं और किसी नई लाइन पर शुरू हों।
फ्लोट और क्लियर प्रॉपर्टीज़ का सही उपयोग आपके वेब पेज के लेआउट और डिज़ाइन को अधिक नियंत्रण में रखता है।
फ्लेक्सबॉक्स (Flexbox)
फ्लेक्सबॉक्स का परिचय (Introduction to Flexbox)
फ्लेक्सबॉक्स एक CSS लेआउट मॉडल है जो वेब पेज पर एलिमेंट्स को अधिक लचीले और कुशल तरीके से व्यवस्थित करने के लिए उपयोग किया जाता है। फ्लेक्सबॉक्स का उद्देश्य कंटेनर और उसके भीतर के आइटम्स के बीच के स्पेस को नियंत्रित करना और आइटम्स को व्यवस्थित करना है। यह मॉडल विशेष रूप से जटिल लेआउट को सरल और अधिक अनुकूल बनाने के लिए डिज़ाइन किया गया है।
फ्लेक्सबॉक्स के घटक (Components of Flexbox)
फ्लेक्सबॉक्स में दो मुख्य घटक होते हैं:
- फ्लेक्स कंटेनर (Flex Container): यह वह एलिमेंट है जो फ्लेक्सबॉक्स लेआउट को नियंत्रित करता है और जिसमें फ्लेक्स आइटम्स होते हैं। इसे
display: flex;का उपयोग करके निर्दिष्ट किया जाता है।
.container {
display: flex;
}- फ्लेक्स आइटम्स (Flex Items): ये वे एलिमेंट्स हैं जो फ्लेक्स कंटेनर के भीतर होते हैं और फ्लेक्सबॉक्स लेआउट नियमों का पालन करते हैं।
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div>
फ्लेक्सबॉक्स का उपयोग (Using Flexbox)
फ्लेक्सबॉक्स का उपयोग करके, आप अपने वेब पेज के लेआउट को अधिक लचीला और नियंत्रित बना सकते हैं। फ्लेक्सबॉक्स के उपयोग में निम्नलिखित प्रॉपर्टीज़ शामिल हैं:
- justify-content: यह प्रॉपर्टी फ्लेक्स कंटेनर के भीतर फ्लेक्स आइटम्स को क्षैतिज दिशा में व्यवस्थित करती है।
.container { justify-content: center; /* फ्लेक्स आइटम्स को केंद्र में व्यवस्थित करता है */ }
- align-items: यह प्रॉपर्टी फ्लेक्स कंटेनर के भीतर फ्लेक्स आइटम्स को ऊर्ध्वाधर दिशा में व्यवस्थित करती है।
.container { align-items: center; /* फ्लेक्स आइटम्स को केंद्र में ऊर्ध्वाधर दिशा में व्यवस्थित करता है */ }
- flex-direction: यह प्रॉपर्टी फ्लेक्स कंटेनर के भीतर फ्लेक्स आइटम्स की दिशा को निर्दिष्ट करती है।
.container { flex-direction: row; /* फ्लेक्स आइटम्स को पंक्ति में व्यवस्थित करता है */ }
फ्लेक्सबॉक्स के उदाहरण (Examples of Flexbox)
नीचे दिए गए उदाहरणों के माध्यम से हम देखेंगे कि फ्लेक्सबॉक्स का उपयोग कैसे किया जाता है।
उदाहरण:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>फ्लेक्सबॉक्स के उदाहरण</title>
<style>
.container {
display: flex;
justify-content: center; /* केंद्र में व्यवस्थित करता है */
align-items: center; /* ऊर्ध्वाधर दिशा में केंद्र में व्यवस्थित करता है */
height: 100vh;
background-color: lightgrey;
}
.item {
background-color: lightblue;
padding: 20px;
margin: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>इन उदाहरणों में, हमने फ्लेक्सबॉक्स का उपयोग करके फ्लेक्स कंटेनर और फ्लेक्स आइटम्स को व्यवस्थित किया है। फ्लेक्सबॉक्स का सही उपयोग करके, आप अपने वेब पेज के लेआउट को अधिक लचीला और कुशल बना सकते हैं।
CSS ग्रिड (CSS Grid)
CSS ग्रिड का परिचय (Introduction to CSS Grid)
CSS ग्रिड एक शक्तिशाली लेआउट प्रणाली है जो वेब पेज के डिज़ाइन को नियंत्रित करने के लिए उपयोग की जाती है। यह एक 2-डायमेंशनल सिस्टम है, जो पंक्तियों और स्तंभों दोनों को संभाल सकता है। CSS ग्रिड का उपयोग करके, आप जटिल लेआउट्स को आसानी से और कुशलता से बना सकते हैं।
CSS ग्रिड के घटक (Components of CSS Grid)
CSS ग्रिड में मुख्य रूप से दो घटक होते हैं:
- ग्रिड कंटेनर (Grid Container): यह वह एलिमेंट है जो ग्रिड लेआउट को नियंत्रित करता है और इसमें ग्रिड आइटम्स होते हैं। इसे
display: grid;याdisplay: inline-grid;का उपयोग करके निर्दिष्ट किया जाता है।.grid-container { display: grid; }
- ग्रिड आइटम्स (Grid Items): ये वे एलिमेंट्स हैं जो ग्रिड कंटेनर के भीतर होते हैं और ग्रिड लेआउट नियमों का पालन करते हैं।
<div class="grid-container"> <div class="grid-item">Item 1</div> <div class="grid-item">Item 2</div> <div class="grid-item">Item 3</div> </div>
CSS ग्रिड का उपयोग (Using CSS Grid)
CSS ग्रिड का उपयोग करके, आप ग्रिड कंटेनर और ग्रिड आइटम्स को नियंत्रित कर सकते हैं। CSS ग्रिड के उपयोग में निम्नलिखित प्रॉपर्टीज़ शामिल हैं:
- grid-template-columns: यह प्रॉपर्टी ग्रिड कंटेनर में स्तंभों की संख्या और उनके आकार को निर्दिष्ट करती है।
.grid-container { grid-template-columns: repeat(3, 1fr); /* तीन समान स्तंभ */ }
- grid-template-rows: यह प्रॉपर्टी ग्रिड कंटेनर में पंक्तियों की संख्या और उनके आकार को निर्दिष्ट करती है।
.grid-container { grid-template-rows: 100px 200px; /* पहली पंक्ति 100px और दूसरी पंक्ति 200px */ }
- gap: यह प्रॉपर्टी ग्रिड आइटम्स के बीच के स्पेस को नियंत्रित करती है।
.grid-container { gap: 10px; /* सभी ग्रिड आइटम्स के बीच 10px का स्पेस */ }
- grid-column: यह प्रॉपर्टी ग्रिड आइटम को स्तंभों में फैलाने के लिए उपयोग की जाती है।
.grid-item { grid-column: span 2; /* दो स्तंभों में फैलता है */ }
- grid-row: यह प्रॉपर्टी ग्रिड आइटम को पंक्तियों में फैलाने के लिए उपयोग की जाती है।
.grid-item { grid-row: span 2; /* दो पंक्तियों में फैलता है */ }
CSS ग्रिड के उदाहरण (Examples of CSS Grid)
नीचे दिए गए उदाहरणों के माध्यम से हम देखेंगे कि CSS ग्रिड का उपयोग कैसे किया जाता है।
उदाहरण:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS ग्रिड के उदाहरण</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* तीन समान स्तंभ */
grid-template-rows: 100px 200px; /* पहली पंक्ति 100px और दूसरी पंक्ति 200px */
gap: 10px; /* सभी ग्रिड आइटम्स के बीच 10px का स्पेस */
background-color: lightgrey;
padding: 10px;
}
.grid-item {
background-color: lightblue;
padding: 20px;
text-align: center;
font-size: 20px;
}
.item1 {
grid-column: span 2; /* दो स्तंभों में फैलता है */
}
.item2 {
grid-row: span 2; /* दो पंक्तियों में फैलता है */
}
</style>
</head>
<body>
<h1>CSS ग्रिड के उदाहरण</h1>
<div class="grid-container">
<div class="grid-item item1">Item 1</div>
<div class="grid-item item2">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
</div>
</body>
</html>इन उदाहरणों में, हमने विभिन्न CSS ग्रिड प्रॉपर्टीज़ का उपयोग करके ग्रिड कंटेनर और ग्रिड आइटम्स को नियंत्रित किया है। CSS ग्रिड का सही उपयोग करके, आप अपने वेब पेज के लेआउट को अधिक लचीला और कुशल बना सकते हैं।
