Box Model in CSS, Flexbox & CSS Grid Explained in Hindi

Himanshu Nigam
May 24, 2025

अगर आप वेब डिज़ाइन या वेब डेवलपमेंट सीख रहे हैं, तो आपने “Box Model in CSS”, “Flexbox in CSS” और “CSS Grid” जैसे शब्द ज़रूर सुने होंगे। ये सिर्फ तकनीकी शब्द नहीं हैं, बल्कि CSS की सबसे जरूरी बुनियादें हैं जो आपकी वेबसाइट के लेआउट और डिज़ाइन को कंट्रोल करती हैं।

इस ब्लॉग में हम इन तीनों कॉन्सेप्ट्स को सरल हिंदी में, उदाहरणों और रोज़मर्रा की भाषा के साथ समझेंगे ताकि आप इन्हें आसानी से अपने प्रोजेक्ट्स में इस्तेमाल कर सकें।

Box Model in CSS – हर HTML एलिमेंट एक बॉक्स है

जब भी आप कोई HTML एलिमेंट बनाते हैं—जैसे एक <div>, <p>, या <button>—तो वह ब्राउज़र में एक बॉक्स की तरह व्यवहार करता है। CSS का Box Model यह तय करता है कि उस बॉक्स का आकार, स्पेसिंग और सीमा (border) कैसी होगी।

Box Model के चार मुख्य हिस्से

Content – यही वह जगह है जहां आपकी टेक्स्ट या इमेज दिखाई देती है।
Padding – यह कंटेंट और बॉर्डर के बीच की जगह होती है।
Border – यह padding के चारों ओर एक फ्रेम जैसा होता है।
Margin – यह बॉक्स और उसके आसपास के दूसरे एलिमेंट्स के बीच की दूरी होती है।

उदाहरण:

.box { width: 200px; padding: 20px; border: 2px solid black; margin: 30px;}

इस कोड में कुल चौड़ाई = content + padding + border + margin
यानी: 200 + 40 (padding दोनों साइड) + 4 (border) + 60 (margin) = 304px

Boxmodel को सही से समझना आपको एलिमेंट्स की पोजीशनिंग और स्पेसिंग पर पूरा कंट्रोल देता है।

Flexbox in CSS – Responsive Layout का जादू

CSS में flexbox in CSS एक ऐसी टेक्नोलॉजी है जो आपके पेज को responsive और स्मार्ट बनाती है। इसका पूरा नाम है Flexible Box Layout। इसका मुख्य उद्देश्य यह है कि आपके पेज के एलिमेंट्स अलग–अलग screen sizes पर अच्छे से दिखाई दें।

Flexbox कैसे काम करता है?

Flexbox में दो टाइप के एलिमेंट्स होते हैं:

Flex Container – वह एलिमेंट जिसके अंदर बाकी एलिमेंट्स हैं।
Flex Items – अंदर के सभी child एलिमेंट्स।

Flexbox Example:

.container {

display: flex;

justify-content:

space-between;

align-items: center;

}

इसमें justify-content कंटेंट को हॉरिज़ॉन्टल दिशा में कंट्रोल करता है और align-items वर्टिकल दिशा में।

Flexbox Design क्यों ज़रूरी है?

आप आसानी से सेंटर्ड लेआउट बना सकते हैं
एलिमेंट्स को responsive बनाना बहुत आसान हो जाता है
CSS Flexbox के ज़रिए ग्रिड जैसे डिज़ाइन भी बनाए जा सकते हैं

Flexbox design के जरिए आप बिना ज्यादा कोड के क्लीन और mobile-friendly वेबसाइट्स बना सकते हैं।

CSS Grid – Complex Layout अब आसान

जहां Flexbox एक लाइन (row या column) में काम करता है, वहीं CSS Grid आपको 2D layout बनाने की सुविधा देता है। इसका मतलब है कि आप एक साथ row और column दोनों में एलिमेंट्स को कंट्रोल कर सकते हैं।

Grid Layout की संरचना

.grid-container {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 20px;

}

इस कोड से 3 कॉलम की एक grid बनेगी जिसमें हर कॉलम समान चौड़ाई का होगा और एलिमेंट्स के बीच में 20px का गैप रहेगा।

CSS Grid के फायदे

Complex layouts भी आसानी से बनाए जा सकते हैं
Row और Column दोनों को एक साथ मैनेज कर सकते हैं
रेस्पॉन्सिव डिज़ाइन बनाना और भी आसान

Flexbox vs Grid – किसे कब इस्तेमाल करें?

Feature	Flexbox	CSS Grid
Layout Direction	1D (row या column)	2D (row और column दोनों)
Best For	Simple UI components	Complex layouts
Content-driven	हाँ	नहीं
Browser Support	बहुत अच्छा	बढ़िया समर्थन

अगर आपको एक लाइन में चीज़ें सजानी हैं, जैसे कि navbar या buttons – तो Flexbox चुनें।
अगर आपको पूरा लेआउट डिज़ाइन करना है, जैसे कि वेबसाइट की पूरी फ्रेम – तो CSS Grid सबसे बेहतर है