CSS Grid द्वि-आयामी लेआउट — पंक्तियां और कॉलम एक साथ — बनाने की लेआउट प्रणाली है, जो पुरानी तकनीकों की तुलना में बहुत कम कोड लेती है। यह चीट शीट हर Grid प्रॉपर्टी को कार्य के अनुसार समूहित करती है: ट्रैक परिभाषित करना, उन्हें साइज़ देना, स्पेसिंग, आइटम प्लेस करना और सब कुछ अलाइन करना।
पेज और कंपोनेंट लेआउट बनाते समय इस पेज को तैयार रखें। प्रत्येक प्रॉपर्टी उसकी वैल्यू और संक्षिप्त विवरण के साथ दिखाई गई है। एक-आयामी पंक्तियों या कॉलम के लिए इसे <a href="/cheatsheet/css-flexbox">CSS Flexbox चीट शीट</a> के साथ उपयोग करें।
Container Setup
| Property / Value | What it does |
|---|
display: grid | Make an element a block-level grid container. |
display: inline-grid | Make a grid container that flows inline. |
grid-template-columns: 1fr 1fr 1fr | Define three equal-width columns. |
grid-template-columns: repeat(3, 1fr) | Shorthand for three equal columns. |
grid-template-columns: 200px auto | Fixed first column, flexible second column. |
grid-template-rows: 100px auto | Define the height of row tracks. |
grid-template-areas: "header header" | Name grid areas to lay out by name. |
grid-auto-flow: row | Control how auto-placed items flow (row or column). |
grid-auto-rows: minmax(100px, auto) | Size rows that are created implicitly. |
Sizing & Units
| Property / Value | What it does |
|---|
1fr | One fraction of the remaining free space. |
repeat(auto-fit, minmax(200px, 1fr)) | Responsive columns with no media queries. |
repeat(auto-fill, 200px) | Fit as many fixed-width tracks as possible. |
minmax(100px, 1fr) | A track that sits between a min and max size. |
min-content / max-content | Size a track to its smallest or largest content. |
Spacing
| Property / Value | What it does |
|---|
gap: 1rem | Space between rows and columns. |
row-gap: 1rem | Space between rows only. |
column-gap: 1rem | Space between columns only. |
Item Placement
| Property / Value | What it does |
|---|
grid-column: 1 / 3 | Span an item from column line 1 to line 3. |
grid-column: span 2 | Span an item across two columns. |
grid-row: 1 / 4 | Span an item from row line 1 to line 4. |
grid-area: header | Place an item into a named grid area. |
grid-area: 1 / 1 / 3 / 3 | row-start / col-start / row-end / col-end. |
Alignment
| Property / Value | What it does |
|---|
justify-items: center | Align items horizontally within their cells. |
align-items: center | Align items vertically within their cells. |
place-items: center | Shorthand for align-items and justify-items. |
justify-content: center | Align the whole grid horizontally in the container. |
align-content: center | Align the whole grid vertically in the container. |
justify-self: end | Align a single item horizontally in its cell. |
align-self: start | Align a single item vertically in its cell. |
CSS Grid चीट शीट से जुड़े सामान्य प्रश्न
CSS Grid और Flexbox में क्या अंतर है?
Grid द्वि-आयामी है — यह पंक्तियों और कॉलम को एक साथ नियंत्रित करता है, पेज लेआउट के लिए आदर्श।
Flexbox एक-आयामी है — यह आइटम्स को एक ही पंक्ति या कॉलम में व्यवस्थित करता है। कई लेआउट समग्र संरचना के लिए Grid और अलग-अलग सेल के अंदर Flexbox उपयोग करते हैं।
CSS Grid में fr यूनिट का क्या अर्थ है?
fr यूनिट ग्रिड कंटेनर में मुक्त स्थान के एक अंश को दर्शाती है। grid-template-columns: 1fr 2fr किसी भी निश्चित-आकार ट्रैक को घटाने के बाद दूसरे कॉलम को पहले से दोगुना चौड़ा बनाता है।
मैं मीडिया क्वेरी के बिना रिस्पॉन्सिव ग्रिड कैसे बनाऊं?
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) उपयोग करें। कॉलम कम से कम 200px चौड़े होते हैं और पंक्ति भरने के लिए बढ़ते हैं, कंटेनर सिकुड़ने पर स्वतः नई पंक्तियों में चले जाते हैं — किसी ब्रेकपॉइंट की जरूरत नहीं।
auto-fit और auto-fill में क्या अंतर है?
दोनों उतने ट्रैक बनाते हैं जितने फिट हों। auto-fill के साथ खाली ट्रैक बने रहते हैं, इसलिए मौजूदा आइटम नहीं खिंचते। auto-fit के साथ खाली ट्रैक सिकुड़ जाते हैं और आइटम पंक्ति भरने के लिए फैल जाते हैं। जब आप चाहते हैं कि आइटम पूरा स्थान उपयोग करें तब auto-fit उपयोग करें।
मैं किसी आइटम को कई कॉलम में कैसे रखूं?
कॉलम लाइन 1 से लाइन 3 तक स्पैन करने के लिए grid-column: 1 / 3, या जहां आइटम रखा है वहां से दो कॉलम स्पैन करने के लिए grid-column: span 2 उपयोग करें। पंक्तियों के लिए grid-row से यही काम होता है।
grid-template-areas क्या करता है?
यह आपको ग्रिड के क्षेत्रों को नाम देने और आइटम्स को नाम से रखने देता है। आप कंटेनर पर लेआउट को स्ट्रिंग्स के दृश्य मानचित्र के रूप में परिभाषित करते हैं, फिर किसी चाइल्ड पर grid-area: header सेट करके उसे उस नामित क्षेत्र में रखते हैं — लेआउट बनाने का बहुत पठनीय तरीका।
मैं ग्रिड के अंदर कंटेंट को केंद्र में कैसे रखूं?
कंटेनर पर place-items: center उपयोग करें ताकि हर आइटम अपनी सेल में क्षैतिज और लंबवत दोनों तरह से केंद्र में हो। यह align-items और justify-items का शॉर्टहैंड है।
