CSS Grid — दो-आयामी लेआउट
4 मिनट पढ़ें · मुफ़्त · बिना लॉगिन
Flexbox पंक्ति या कॉलम के लिए शानदार है। लेकिन पूरा पेज न पंक्ति है, न कॉलम — वह दोनों एक साथ है। पेज के ऊपर header, बगल-बगल sidebar और main content, और नीचे footer — यह दो-आयामी (two-dimensional) लेआउट है, और ठीक इसी के लिए CSS Grid बना है।
Grid CSS से बनी table की तरह काम करता है: आप container को बताते हैं कि उसमें कितने columns और rows हैं, और हर item अपने cell में बैठ जाता है। आप किसी item को दो columns में फैला सकते हैं, या grid areas से नाम देकर जगह बता सकते हैं — आधुनिक पेज लेआउट ज़्यादातर इसी तरह बनते हैं।
Grid container — नक्शा बनाने वाला box
Flexbox की तरह Grid भी container पर display: grid से शुरू होता है। फिर grid-template-columns columns तय करता है। fr unit का मतलब है "खाली जगह का एक हिस्सा": 1fr 1fr 1fr तीन बराबर कॉलम देता है, और 2fr 1fr एक चौड़ा और एक सँकरा कॉलम देता है। gap सभी cells के बीच बराबर जगह रखता है।
Syntax — तीन बराबर कॉलम
.gallery {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 15px;
}
Items पर चौड़ाई तय करने की बिल्कुल ज़रूरत नहीं है। Grid columns तय करता है, और हर item अपने आप अगला खाली cell ले लेता है, बाएँ से दाएँ, पंक्ति दर पंक्ति।
Grid areas — पाँच लाइन में पूरा पेज
पेज लेआउट के लिए नाम वाले areas सबसे साफ तरीका हैं। आप grid-template-areas से एक छोटा नक्शा बनाते हैं, हर हिस्से को एक नाम देते हैं — header, sidebar, main, footer — और फिर हर element grid-area से बताता है कि वह किस area का है। नक्शा खुद एक नज़र में लेआउट दिखा देता है।
.page {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
header { grid-area: header; }
aside { grid-area: sidebar; }
नक्शे की हर पंक्ति quotes में लिखी एक लाइन है, और हर शब्द एक cell है। "header header" लिखने का मतलब है कि header दोनों columns में फैला है। हर पंक्ति में शब्दों की संख्या columns की संख्या के बराबर होनी चाहिए।
repeat(3, 1fr), 1fr 1fr 1fr का छोटा रूप है। Gallery के लिए यह बहुत काम का है: grid-template-columns: repeat(3, 1fr) तीन बराबर कॉलम बनाता है, और 3 को 4 में बदलते ही पूरी gallery एक साथ बदल जाती है।आम गलतियाँ
display: gridको items पर लगाना, container पर नहीं — Flexbox की तरह Grid भी सिर्फ parent से काम करता है।grid-template-areasकी हर पंक्ति में अलग-अलग संख्या में शब्द लिखना — हर पंक्ति में उतने ही शब्द होने चाहिए जितने columns हैं।- Gallery के लिए
200px 200px 200pxजैसे fixed pixel columns इस्तेमाल करना — phone पर grid बाहर निकल जाता है।1frयाrepeat()इस्तेमाल करें ताकि columns सिकुड़ सकें। - किसी element पर
grid-areaभूल जाना — element आपके बनाए area की बजाय अगले खाली cell में चला जाता है। - Links की एक पंक्ति के लिए Grid चुनना — वहाँ Flexbox आसान है; Grid को उन लेआउट के लिए बचाकर रखें जिनमें पंक्तियाँ और कॉलम दोनों चाहिए।
याद रखें
- Grid दो-आयामी है: पंक्तियाँ और कॉलम एक साथ।
- Container को
display: gridमिलता है;grid-template-columnscolumns तय करता है। 1frका मतलब है खाली जगह का एक हिस्सा;repeat(3, 1fr)तीन बराबर कॉलम बनाता है।grid-template-areasलेआउट का नक्शा बनाता है;grid-areaहर element को उस पर रखता है।- पेज लेआउट और gallery के लिए Grid, एक पंक्ति के लिए Flexbox इस्तेमाल करें।
याद रखने की तरकीब: Grid नक्शा है — पहले नक्शा बनाओ, फिर हर हिस्सा अपनी जगह पर बैठेगा।
उदाहरण समझिए
.page { display: grid; }— पूरा पेज grid container बन जाता है, इसलिए उसके चारों हिस्सों को नक्शे पर रखा जा सकता है, एक के ऊपर एक होने की बजाय।grid-template-columns: 200px 1fr— sidebar को 200px का fixed कॉलम मिलता है और main content बची हुई जगह ले लेता है।grid-template-areas— तीन पंक्तियों का नक्शा: header दोनों columns में फैला है, फिर sidebar और main बगल-बगल बैठते हैं, फिर footer फिर से दोनों columns में फैलता है।header { grid-area: header; }और sidebar, main व footer के लिए ऐसे ही नियम — हर element को बताया जाता है कि वह नक्शे के किस नाम वाले area का है।.gallery { grid-template-columns: repeat(3, 1fr); }— main area के अंदर एक छोटा दूसरा grid 10px gap के साथ तीन बराबर photo boxes बनाता है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title>School Page with CSS Grid</title>
<style>
* { box-sizing: border-box; }
body { font-family: Arial, sans-serif; margin: 0; }
.page {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
header { grid-area: header; background-color: #04aa6d; color: white; padding: 20px; text-align: center; }
aside { grid-area: sidebar; background-color: #f1f1f1; padding: 20px; }
main { grid-area: main; padding: 20px; }
footer { grid-area: footer; background-color: #333; color: white; padding: 15px; text-align: center; }
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.gallery div {
background-color: #ddd;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="page">
<header>
<h1>KAMALDNP Academy</h1>
<p>Learn by doing</p>
</header>
<aside>
<h3>Subjects</h3>
<p>HTML</p>
<p>CSS</p>
<p>Python</p>
<p>Java</p>
</aside>
<main>
<h2>Welcome Students</h2>
<p>This page is built with CSS Grid. The header and footer stretch across both columns, while the sidebar and main content sit side by side.</p>
<div class="gallery">
<div>Photo 1</div>
<div>Photo 2</div>
<div>Photo 3</div>
</div>
</main>
<footer>
<p>support@kamaldnp.com | Varanasi, UP</p>
</footer>
</div>
</body>
</html>परिणाम
खुद करके देखें — लाइव एडिटर
नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।
खुद क्यों सीखें — AI से पूछने के बजाय?
AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।
सर्टिफिकेट पाएँ — सिर्फ ₹10
सभी 30 पाठ पूरे करें, टेस्ट पास करें (80%), ₹10 दें और अपना सर्टिफिकेट पाएँ।
टेस्ट देंदेखकर सीखना पसंद है? वीडियो कोर्स में वही विषय एक-एक करके सिखाए जाते हैं।
Go further with a full course
Free tutorials teach you the basics. Our paid courses add live projects, mentorship and a certificate.
Browse all courses
