CSS Grid एक CSS layout system है जिसका उपयोग webpage के elements को rows (पंक्तियों) और columns (स्तंभों) में व्यवस्थित करने के लिए किया जाता है।

इसकी मदद से हम आसानी से complex layouts बना सकते हैं जैसे:

• Website का complete layout
• Card layouts
• Gallery design
• Dashboard design

CSS Grid के मुख्य Concepts

CSS Grid में दो मुख्य चीजें होती हैं:

1. Grid Container
2. Grid Items

1. Grid Container

जिस element पर display: grid लगाया जाता है, वह Grid Container बन जाता है।

Example:

.container {
    display: grid;
}

---

2. Grid Items

Container के अंदर मौजूद सभी child elements Grid Items कहलाते हैं।

Example:

<div class="container">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

CSS Grid Syntax

.container {
    display: grid;
    property: value;
}

1. display: grid

display:grid का use Grid layout शुरू करने के लिए किया जाता है :

.container {
    display: grid;
}

---

2. grid-template-columns

grid-template-columns का use यह बताने के लिए किया जाता है कि कितने columns होंगे और उनकी width क्या होगी।

Example:

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
}

Output:

| 200px | 200px | 200px |

यहाँ 3 columns बनेंगे।

---

fr Unit (Fraction)

fr Grid में available space को divide करता है।

Example:

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

Output:

| 1fr | 1fr | 1fr |

तीनों columns बराबर होंगे।

---

3. grid-template-rows

grid-template-rows का use Rows की height define करने के लिए किया जाता है।

Example:

.container {
    grid-template-rows: 100px 200px;
}

Output:

Row 1 = 100px
Row 2 = 200px

---

4. gap Property

gap Property का use Grid items के बीच space देने के लिए किया जाता है।

Example:

.container {
    display: grid;
    gap: 20px;
}

---

अलग-अलग gap

.container {
    row-gap: 20px;
    column-gap: 30px;
}

---

5. repeat() Function

repeat-function का use बार-बार लिखने से बचाने के लिए किया जाता है।

Normal:

grid-template-columns: 1fr 1fr 1fr;

Repeat के साथ:

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

दोनों का output समान होगा।

---

6. grid-column

grid-column का use किसी item को कितने columns तक फैलाने के लिए किया जाता है।

Example:

.item1 {
    grid-column: 1 / 3;
}

मतलब:

Item column 1 से column 3 तक फैलेगा।

---

7. grid-row

grid-row का use Rows में फैलाने के लिए किया जाता है।

Example:

.item1 {
    grid-row: 1 / 3;
}

मतलब:

Item दो rows तक फैलेगा।

---

8. justify-items

justify-items का use Horizontal direction में items को align करने के लिए किया जाता है।

Values:

• start
• center
• end
• stretch

Example:

.container {
    justify-items: center;
}

---

9. align-items

align-items का use Vertical direction में items को align करने के लिए किया जाता है।

Example:

.container {
    align-items: center;
}

---

10. place-items

place-items का use align-items और justify-items दोनों को एक साथ लिखने के लिए किया जाता है।

Example:

.container {
    place-items: center;
}

CSS Grid और Flexbox में Difference

CSS Grid	Flexbox
Two dimensional layout	One dimensional layout
Rows और Columns दोनों	केवल Row या Column
Complete page layout के लिए	छोटे components के लिए
ज्यादा powerful	आसान और fast

CSS Grid के Important Properties

Property	काम
display:grid	Grid शुरू करना
grid-template-columns	Columns बनाना
grid-template-rows	Rows बनाना
gap	Items के बीच दूरी
grid-column	Column में फैलाना
grid-row	Row में फैलाना
justify-items	Horizontal alignment
align-items	Vertical alignment
place-items	दोनों alignment

• इसे भी पढ़े : HTML
• इसे भी पढ़े : javascript
• इसे भी पढ़े : PHP
• इसे भी पढ़े : CSS

• CSS Full course Roadmap 2026March 31, 2026
  CSS Introduction↓CSS Syntax & Basic Concepts↓Selectors↓CSS Properties↓Colors & Backgrounds↓Text & Fonts↓Box Model↓Display & Positioning↓Flexbox↓CSS Grid↓Responsive Design↓Animations & Transitions↓Advanced CSS↓CSS Frameworks↓Real Projects↓Professional Frontend Developer
• What is CSS in Hindi ? How to learn for CSS in HindiJune 19, 2026
  Types of CSS in Hindi 1. Inline CSS Inline CSS का use HTML tags के अंदर ही किया जाता है|  लेकिन इसे Style Attribute के द्वारा use किया जाता है | Syntax : Example : 2. Internal CSS Internal CSS को लिखने के लिए हमें style टैग को create करना पड़ता है, क्योंकि बिना style… Read more: What is CSS in Hindi ? How to learn for CSS in Hindi
• CSS Syntax & Basic Concepts in Hindi (basic to advanced)June 19, 2026
  CSS Syntax : Basic Syntax : Example : Explained : Parts Meaning h1 Selector (जिस element को style करना है) color Property (क्या बदलना है) blue Value (किस प्रकार बदलना है) { } CSS Declaration Block ; प्रत्येक property के बाद लगाया जाता है CSS Syntax के मुख्य भाग 1. Selector Selector यह बताता है… Read more: CSS Syntax & Basic Concepts in Hindi (basic to advanced)
• CSS Properties in Hindi (Professional website build)June 22, 2026
  CSS Property वह नियम (rule) होता है जिसके द्वारा हम HTML elements की design, style और appearance को बदलते हैं। Syntax : CSS Properties के मुख्य प्रकार 1. Color Properties 1. color Color Properties का उपयोग Text का रंग बदलने के लिए किया जाता है। Syntax : 2. background-color Background-color का उपयोग Element का background… Read more: CSS Properties in Hindi (Professional website build)
• CSS display & positioning in Hindi (Beginner to Advanced)June 22, 2026
  CSS में Display और Positioning का उपयोग HTML elements को webpage पर दिखाने और उनकी जगह (location) को नियंत्रित करने के लिए किया जाता है। 1. CSS Display Property display property यह बताती है कि कोई HTML element webpage पर किस प्रकार दिखाई देगा। Syntax: Display Property के मुख्य Types : Display Value Meaning (अर्थ)… Read more: CSS display & positioning in Hindi (Beginner to Advanced)