ग्रिड शॉर्टहैंड प्रॉपर्टी grid प्रॉपर्टी से निम्न प्रॉपर्टीज़ सेट करें: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, grid-auto-flow। उदाहरण <!DOCTYPE html> <html> <head> <style> .container { display: g

ग्रिड आइटम का आकार सेट करें grid-row प्रॉपर्टी से ग्रिड आइटम्स का आकार सेट करें। इसमें grid-row-start और grid-row-end प्रॉपर्टीज़ शामिल हैं। उदाहरण <!DOCTYPE html> <html> <head> <style> .container { display: grid; background-color: green;

लीनियर ग्रेडिएंट बैकग्राउंड linear-gradient() CSS फ़ंक्शन का उपयोग करके लीनियर ग्रेडिएंट को बैकग्राउंड इमेज के रूप में सेट करें। उदाहरण <!DOCTYPE html> <html> <head> <style> #demo { height: 200px; background: linear-gradient(green, orange, maroon)

align-content: space-around align-content प्रॉपर्टी को space-around मान के साथ उपयोग करके फ्लेक्स लाइन्स के चारों ओर स्पेस जोड़ें। उदाहरण <!DOCTYPE html> <html> <head> <style> .mycontainer { display: flex; height: 200px; background-color:

align-content: center align-content प्रॉपर्टी को center मान के साथ उपयोग करके फ्लेक्स लाइन्स को केंद्र में सेट करें। उदाहरण <!DOCTYPE html> <html> <head> <style> .mycontainer { display: flex; height: 200px; background-color: red; a

नेविगेशन: दाएं जाएं nav-right प्रॉपर्टी का उपयोग तब किया जाता है जब कीपैड पर दायां तीर बटन दबाया जाता है। उदाहरण <!DOCTYPE html> <html> <head> <style> button { position: absolute; } button#btn1 { top:10%; left:15%; nav-index:1; nav-right:#btn2; nav-left:#bt

फ्लेक्स कंटेनर और आइटम्स एक फ्लेक्स कंटेनर परिभाषित करें और उसमें फ्लेक्स आइटम्स सेट करें। उदाहरण <!DOCTYPE html> <html> <head> <style> .mycontainer { display: flex; background-color: orange; } .mycontainer > div { backgroun

CSS ग्रिड में रो और कॉलम के बीच की दूरी (गटर) सेट करने के लिए तीन प्रॉपर्टीज़ हैं। मॉडर्न CSS में gap शॉर्टहैंड का उपयोग करने की सिफारिश की जाती है, जो फ्लेक्सबॉक्स में भी काम करता है। 1. grid-column-gap (अब column-gap) केवल कॉलम (ऊर्ध्वाधर ट्रैक्स) के बीच गैप सेट करता है। <!DOCTYPE html> &l

फ्लेक्स कंटेनर के डायरेक्ट चाइल्ड्स (फ्लेक्स आइटम्स) पर लागू होने वाली 6 प्रॉपर्टीज़ हैं जो व्यक्तिगत आइटम के व्यवहार को नियंत्रित करती हैं। फ्लेक्स आइटम प्रॉपर्टीज़ प्रॉपर्टीविवरणडिफ़ॉल्ट orderदृश्य क्रम (संख्या, ऋणात्मक संभव)0 flex-growअतिरिक्त स्थान में हिस्सा (संख्या)0 flex-shrinkस्थान

इमेज के ठीक केंद्र में टेक्स्ट रखने के लिए position: absolute के साथ transform: translate(-50%, -50%) तकनीक का उपयोग करें। यह किसी भी आकार के टेक्स्ट/इमेज के लिए काम करता है। उदाहरण: इमेज पर केंद्रित टेक्स्ट <!DOCTYPE html> <html> <head> <style> .container { pos

grid-template-columns प्रॉपर्टी CSS ग्रिड लेआउट में प्रत्येक कॉलम की चौड़ाई परिभाषित करती है। यह ग्रिड की क्षैतिज संरचना का मुख्य नियंत्रण है। उदाहरण: तीन कॉलम, अलग-अलग चौड़ाई पहला कॉलम 120px, दूसरा 80px, तीसरा 50px चौड़ा। <!DOCTYPE html> <html> <head> <style> .contai

grid-gap (अब gap के रूप में मानकीकृत) प्रॉपर्टी ग्रिड रो और कॉलम के बीच की दूरी (गटर) सेट करने का शॉर्टहैंड है। यह row-gap और column-gap को जोड़ती है। उदाहरण: grid-gap: 20px 20px रो गैप 20px, कॉलम गैप 20px। <!DOCTYPE html> <html> <head> <style> .container { disp

justify-content: center फ्लेक्स आइटम्स को मेन एक्सिस (मुख्य अक्ष) पर केंद्र में संरेखित करता है। आइटम्स एक समूह के रूप में केंद्रित होते हैं, उनके बीच का स्पेस अपरिवर्तित रहता है (यदि gap सेट है)। उदाहरण: center के साथ फ्लेक्स आइटम्स केंद्रित <!DOCTYPE html> <html> <head> <s

grid-template-rows प्रॉपर्टी CSS ग्रिड कंटेनर में प्रत्येक रो (पंक्ति) की ऊंचाई परिभाषित करती है। यह रो ट्रैक्स के आकार को स्पष्ट रूप से नियंत्रित करती है। उदाहरण: तीन रो वाली ग्रिड, अलग-अलग ऊंचाई पहली रो 120px, दूसरी 90px, तीसरी 100px ऊंची है। 6 आइटम्स 3 रो में वितरित होते हैं। <!DOCTYPE html&

grid-column-start प्रॉपर्टी निर्धारित करती है कि ग्रिड आइटम किस कॉलम लाइन से शुरू होगा। यह ग्रिड आइटम की क्षैतिज (हॉरिजॉन्टल) शुरुआती स्थिति सेट करती है। उदाहरण: आइटम 1 को कॉलम लाइन 2 से शुरू करें सामान्यतः आइटम 1 कॉलम लाइन 1 से शुरू होता है, लेकिन grid-column-start: 2 से यह दूसरी कॉलम लाइन से शुरू

ग्रिड लाइन्स (Grid Lines) ग्रिड ट्रैक्स (रो और कॉलम) को विभाजित करने वाली रेखाएं हैं। ये ग्रिड आइटम्स को पोज़िशन करने के लिए संदर्भ बिंदु प्रदान करती हैं। ग्रिड लाइन्स के प्रकार कॉलम लाइन्स (Column Lines): ऊर्ध्वाधर रेखाएं जो कॉलम को अलग करती हैं रो लाइन्स (Row Lines): क्षैतिज रेखाएं जो रो को

इमेज पर टेक्स्ट को टॉप-लेफ्ट (ऊपर बाएं) कोने में रखने के लिए position: absolute के साथ top और left प्रॉपर्टीज़ का उपयोग करें। उदाहरण: इमेज पर टॉप-लेफ्ट टेक्स्ट <!DOCTYPE html> <html> <head> <style> .box { position: relative; display: inline-block; ma

flex-direction: row-reverse फ्लेक्स आइटम्स को मुख्य अक्ष (मेन एक्सिस) पर दाएं से बाएं हॉरिजॉन्टल रूप से व्यवस्थित करता है। दृश्य क्रम उल्टा हो जाता है लेकिन DOM क्रम अपरिवर्तित रहता है। उदाहरण: row-reverse दिशा आइटम्स HTML में Q1-Q6 क्रम में हैं लेकिन दाएं से बाएं दिखते हैं: Q6, Q5, Q4, Q3, Q2, Q1।

max-width: 100% वीडियो प्लेयर को रिस्पॉन्सिव बनाने का सुरक्षित तरीका है। वीडियो अपने पैरेंट से चौड़ा नहीं होगा, लेकिन छोटे कंटेनर में स्केल डाउन होगा। height: auto एस्पेक्ट रेशियो बनाए रखता है। उदाहरण: max-width के साथ रिस्पॉन्सिव वीडियो <!DOCTYPE html> <html> <head> <meta n

CSS ग्रिड लेआउट एक दो-आयामी (2D) लेआउट सिस्टम है जो पंक्तियों (रो) और कॉलम्स दोनों को एक साथ नियंत्रित करता है। यह पेज-लेवल लेआउट, डैशबोर्ड, जटिल इंटरफेस के लिए आदर्श है। ग्रिड लेआउट के मुख्य घटक 1. ग्रिड एलिमेंट्स ग्रिड कंटेनर (पैरेंट): display: grid वाला एलिमेंट ग्रिड आइटम्स (चाइल्ड): कंटेन