CSS ग्रिड लेआउट में दो प्रकार के एलिमेंट्स होते हैं: ग्रिड कंटेनर (पैरेंट) और ग्रिड आइटम्स (चाइल्ड)। पैरेंट पर display: grid सेट करने से उसके डायरेक्ट चाइल्ड ग्रिड आइटम्स बन जाते हैं। उदाहरण: 6 एलिमेंट्स वाला बेसिक ग्रिड 2 कॉलम वाला ग्रिड जिसमें 6 आइटम्स हैं। <!DOCTYPE html> <html> <

align-content: flex-start मल्टी-लाइन फ्लेक्स कंटेनर में सभी फ्लेक्स लाइन्स को क्रॉस-एक्सिस की शुरुआत (start) में पैक करता है। Row दिशा में यह लाइन्स को **ऊपर** (टॉप) संरेखित करता है। उदाहरण: flex-start के साथ लाइन्स शीर्ष पर कंटेनर की ऊंचाई 200px है। 8 आइटम्स 4 लाइन्स बनाते हैं, सभी लाइन्स कंटेनर क

CSS ग्रिड लेआउट में ग्रिड कॉलम (Grid Columns) ऊर्ध्वाधर (वर्टिकल) ट्रैक्स होते हैं जो ग्रिड कंटेनर को कॉलम में विभाजित करते हैं। grid-template-columns प्रॉपर्टी से परिभाषित किए जाते हैं। ग्रिड कॉलम अवधारणा ग्रिड कॉलम ग्रिड लाइन्स (ऊर्ध्वाधर रेखाएं) के बीच का स्थान है। कॉलम की संख्या और आकार grid-te

flex-wrap प्रॉपर्टी निर्दिष्ट करती है कि फ्लेक्स आइटम्स एक ही लाइन में रहने के लिए मजबूर होंगे या आवश्यकतानुसार कई लाइनों में रैप (wrap) होंगे। उदाहरण: flex-wrap: wrap कंटेनर की चौड़ाई से अधिक आइटम्स होने पर वे स्वचालित रूप से अगली लाइन में चले जाते हैं। <!DOCTYPE html> <html> <head

flex-basis प्रॉपर्टी फ्लेक्स आइटम का प्रारंभिक मुख्य आकार (main size) निर्धारित करती है, इससे पहले कि flex-grow या flex-shrink लागू हों। यह width (row के लिए) या height (column के लिए) जैसा व्यवहार करता है लेकिन फ्लेक्स संदर्भ में। उदाहरण: Q4 के लिए flex-basis: 350px Q4 का प्रारंभिक आकार 350px सेट

CSS फ्लेक्सबॉक्स (Flexible Box Layout Module) एक-आयामी (1D) लेआउट मॉडल है जो कंटेनर में आइटम्स के बीच स्थान वितरण और संरेखण को शक्तिशाली तरीके से नियंत्रित करता है। यह रिस्पॉन्सिव डिज़ाइन का आधार है। फ्लेक्स कंटेनर प्रॉपर्टीज़ (पैरेंट पर) प्रॉपर्टीकार्य flex-directionमेन एक्सिस दिशा: row, colu

बटन में पारदर्शिता (ट्रांसपेरेंसी) जोड़ने के लिए CSS opacity प्रॉपर्टी का उपयोग करें। 0 से 1 के बीच का मान सेट करें: 1 = पूरी तरह अपारदर्शी, 0 = पूरी तरह पारदर्शी। यह डिसेबल्ड लुक बनाने के लिए आम है। उदाहरण: पारदर्शिता के साथ बटन <!DOCTYPE html> <html> <head> <style>

रिस्पॉन्सिव वेब डिज़ाइन (RWD) एक ऐसा दृष्टिकोण है जहां वेब पेज सभी डिवाइसेज़ (मोबाइल, टैबलेट, डेस्कटॉप, टीवी) पर अच्छा दिखता और काम करता है, बिना अलग-अलग वर्जन बनाए। HTML और CSS का उपयोग करके लेआउट डिवाइस के अनुसार अनुकूलित होता है। क्यों महत्वपूर्ण है? मोबाइल ट्रैफिक: 50%+ वेब ट्रैफिक मोबाइल से

व्यूपोर्ट (Viewport) वेब डिज़ाइन में वेब पेज का दृश्यमान क्षेत्र (visible area) है। मोबाइल डिवाइसेज़ पर यह स्क्रीन आकार से अलग हो सकता है क्योंकि ब्राउज़र पेज को वर्चुअल विंडो में रेंडर कर सकते हैं। व्यूपोर्ट सेट करना <meta name=viewport content=width=device-width, initial-scale=1.0> पैरामी

मोबाइल डिवाइसेज़ पर वेब पेज को सही ढंग से रेंडर करने के लिए व्यूपोर्ट मेटा टैग आवश्यक है। यह ब्राउज़र को पेज की चौड़ाई और प्रारंभिक ज़ूम स्तर को नियंत्रित करने का निर्देश देता है। व्यूपोर्ट मेटा टैग <meta name=viewport content=width=device-width, initial-scale=1.0> पैरामीटर्स समझाए गए पै

रिस्पॉन्सिव ग्रिड-व्यू बनाने के लिए फ्लोट-आधारित लेआउट के साथ मीडिया क्वेरीज़ का उपयोग करें। मॉडर्न CSS में CSS Grid या Flexbox बेहतर विकल्प हैं, लेकिन फ्लोट-आधारित दृष्टिकोण लीगेसी सपोर्ट के लिए समझना महत्वपूर्ण है। उदाहरण: फ्लोट-आधारित रिस्पॉन्सिव लेआउट <!DOCTYPE html> <html> <hea

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

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

flex-flow शॉर्टहैंड प्रॉपर्टी flex-direction और flex-wrap को एक ही घोषणा में सेट करती है। यह फ्लेक्स कंटेनर के प्रवाह व्यवहार को संक्षिप्त रूप से परिभाषित करती है। उदाहरण: flex-flow: column wrap <!DOCTYPE html> <html> <head> <style> .mycontainer { display: flex;

बैकग्राउंड इमेज को रिस्पॉन्सिव बनाने के लिए background-size: contain या cover के साथ width: 100% का उपयोग करें। व्यूपोर्ट मेटा टैग मोबाइल पर सही स्केलिंग सुनिश्चित करता है। उदाहरण: रिस्पॉन्सिव बैकग्राउंड इमेज <!DOCTYPE html> <html> <head> <meta name=viewport content=width=de

वीडियो प्लेयर को रिस्पॉन्सिव बनाने के लिए width: 100% और height: auto सेट करें। वीडियो अपने पैरेंट कंटेनर की चौड़ाई के अनुसार स्केल होगा, एस्पेक्ट रेशियो बनाए रखते हुए। उदाहरण: रिस्पॉन्सिव वीडियो <!DOCTYPE html> <html> <head> <meta name=viewport content=width=device-width, i

बटन्स पर होवर प्रभाव के लिए :hover स्यूडो-क्लास, एक्टिव स्टेट के लिए .active क्लास, और राउंडेड कोनों के लिए border-radius प्रॉपर्टी का उपयोग करें। उदाहरण: राउंडेड होवर/एक्टिव बटन <!DOCTYPE html> <html> <head> <style> .demo { display: flex; gap: 8px;

justify-content: space-between फ्लेक्स आइटम्स को इस प्रकार वितरित करता है कि पहला आइटम मेन-स्टार्ट पर, अंतिम आइटम मेन-एंड पर हो, और शेष आइटम्स के बीच समान स्पेस हो। किनारों पर कोई पैडिंग नहीं। उदाहरण: space-between के साथ फ्लेक्स आइटम्स पहला आइटम बाएं किनारे पर, अंतिम दाएं किनारे पर, बीच के दो आइटम

column-rule-style प्रॉपर्टी मल्टी-कॉलम लेआउट में कॉलम के बीच की विभाजक रेखा (रूल) की शैली निर्धारित करती है। यह border-style के समान मान स्वीकार करती है। उदाहरण: डैश्ड रूल शैली <!DOCTYPE html> <html> <head> <style> .demo { column-count: 4; column-gap: 50px

column-rule-width प्रॉपर्टी मल्टी-कॉलम लेआउट में कॉलम के बीच की विभाजक रेखा (रूल) की चौड़ाई निर्धारित करती है। यह column-rule शॉर्टहैंड का हिस्सा है। उदाहरण: 5px चौड़ी डैश्ड रूल <!DOCTYPE html> <html> <head> <style> .demo { column-count: 4; column-gap: 50p