CSS Grid Property Kya Hoti Hai ?

CSS Grid ek powerful layout system hai jo hume webpages ke elements ko rows aur columns me arrange karne ki suvidha deta hai. Yeh flexible aur responsive layouts banane ke liye ek behtareen tool hai. Is guide me hum CSS Grid ke basic se lekar advanced concepts tak discuss karenge.

1. Introduction to CSS Grid

CSS Grid ek two-dimensional layout system hai jo rows aur columns dono ko manage karne ki suvidha deta hai. Yeh Flexbox se alag hai kyunki Flexbox ek one-dimensional layout system hai jo ya to rows me ya columns me kaam karta hai.

Features of CSS Grid:

• Two-dimensional layout (rows & columns)
• Auto-placement of elements
• Responsive aur flexible designs
• Alignment aur spacing options

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px;
  gap: 10px;
}

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

Yahan par .container ek grid container hai jo 3 columns aur 2 rows ka layout define karta hai.

2. Grid Container (display: grid;)

Jab bhi hum CSS Grid Layout ka use karte hain, toh sabse pehle hume ek grid container define karna padta hai. Grid container ek aise parent element ko kehte hain jo display: grid; property ke through apne andar ke child elements ko ek structured grid-based layout me organize karta hai.

.container {
  display: grid; /* Block-level grid */
}
.inline-container {
  display: inline-grid; /* Inline grid */
}

display: grid; pura container ek block element ki tarah behave karega.
display: inline-grid; container apni jagah par inline-block jaisa behave karega.

3. Grid Template (grid-template-rows, grid-template-columns)

Grid Template ek CSS property hai jo kisi container ke rows aur columns ka structure define karti hai. Yeh grid-template-rows aur grid-template-columns ka use karke grid ke layout ko control karne ka tareeka provide karti hai.

.container {
  display: grid;
  grid-template-columns: 200px 200px auto; /* 3 columns */
  grid-template-rows: 150px 150px; /* 2 rows */
}

Units used in Grid:

• px → Fixed size
• % → Parent container ke percentage me
• fr → Fractional unit (auto distribution)
• auto → Automatically adjust hoga

.container {
  grid-template-columns: 1fr 2fr 1fr; /* 3 columns, 2nd column is twice the size */
}

4. Grid Gaps (row-gap, column-gap)

Grid gaps ka use CSS Grid Layout me rows aur columns ke beech ka gap define karne ke liye kiya jata hai. Yeh properties grid ke items ke beech me spacing banane me madad karti hain, jisse layout aur zyada clear aur structured dikhta hai.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  row-gap: 20px; /* Row gap */
  column-gap: 15px; /* Column gap */
}

Shortcut use karne ke liye gap property ka use kar sakte hain:

.container {
  gap: 20px 15px; /* row-gap column-gap */
}

5. Grid Items (grid-row-start, grid-row-end, grid-column-start, grid-column-end)

Grid items ko specific rows aur columns par place karne ke liye grid-row-start, grid-row-end, grid-column-start aur grid-column-end properties ka use hota hai.

.item {
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column-start: 1;
  grid-column-end: 3;
}

Ya shorthand grid-row aur grid-column use kar sakte hain:

.item {
  grid-row: 1 / 3;
  grid-column: 1 / 3;
}

Yeh item first row se lekar third row tak aur first column se third column tak stretch hoga.

6. Grid Areas

Grid Areas ek important concept hai CSS Grid Layout me, jo kisi grid container ke andar grid items ko organize aur place karne ka ek systematic tarika provide karta hai. Grid area ka use karke hum multiple grid cells ko ek single unit me group kar sakte hain, jo layout designing ko aur flexible aur manageable banata hai.

Step 1: Grid Areas Define Karna

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 100px 200px 100px;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

Step 2: Items Ko Grid Areas Assign Karna

.header {
  grid-area: header;
  background: lightblue;
}
.sidebar {
  grid-area: sidebar;
  background: lightcoral;
}
.main {
  grid-area: main;
  background: lightgreen;
}
.footer {
  grid-area: footer;
  background: lightgray;
}

Step 3: HTML Structure

<div class=”container”>
<div class=”header”>Header</div>
<div class=”sidebar”>Sidebar</div>
<div class=”main”>Main Content</div>
<div class=”footer”>Footer</div>
</div>

Is method ka use karke hum complex layouts ko bhi easily design kar sakte hain.

CSS Grid ek powerful aur flexible layout system hai jo complex designs ko bhi simplify kar deta hai. Yeh responsive aur well-structured layouts ke liye best hai. Agar aap modern web design me interested hain, to CSS Grid seekhna zaroori hai.

Aur Grid Container Properties:

1. justify-items – Har grid cell ke andar items ko horizontally align karta hai.

Summary Table – justify-items Values & Effects

2.align-items – Har grid cell ke andar items ko vertically align karta hai.

align-items ke andar sabhi options ki list 

start – Grid items ko top (upar) align karta hai.
end – Grid items ko bottom (neeche) align karta hai.
center – Grid items ko vertically center karta hai.
stretch (default) – Grid items ko poori available height tak kheench deta hai.
baseline – Grid items ka text baseline ek line me set karta hai.

3. place-items – align-items aur justify-items ka shorthand hai.

Iske andar yeh saare options aate hain:

start – Items top-left par align honge.
end – Items bottom-right par align honge.
center – Items bilkul beech me honge.
stretch – Items poore available space me spread honge.

4.justify-content – Puri grid ko horizontally align karta hai.

start – Items ko container ke left side align karta hai.
end – Items ko container ke right side align karta hai.
center – Items ko bilkul beech (center) me align karta hai.
space-between – First item left me aur last item right me, beech ke items ke beech equal space.
space-around – Sabhi items ke chaaro taraf equal space deta hai.
space-evenly – Sabhi items ke beech aur edges ke sath equal space deta hai.
stretch (sirf grid me) – Items ko available space tak stretch kar deta hai.

5.align-content – Puri grid ko vertically align karta hai.

align-content ke sabhi options:

start – Content container ke top par align hoga.
end – Content container ke bottom par align hoga.
center – Content container ke center me align hoga.
stretch (default) – Content poori available space ko fill karega.
space-between – First row top pe aur last row bottom pe, beech ki rows evenly spaced rahengi.
space-around – Har row ke around equal space rahega.
space-evenly – Har row ke beech me aur edges par equal space hoga.

6.place-content – align-content aur justify-content ka shorthand hai.

Sabhi Options ki List:

start – Content ko top-left par place karega.
end – Content ko bottom-right par place karega.
center – Content ko bilkul beech (center) me place karega.
stretch – Content ko poore available space tak spread karega.
space-between – Content ke items first aur last edge par fix honge, beech me equal space hoga.
space-around – Content ke chaaro taraf equal space hoga.
space-evenly – Har item ke beech aur edges ke saath equal space hoga.
baseline – Items ko baseline align karega.
normal – Default behavior, jisme items apni normal position par rahenge

Aur Grid Item Properties:

• justify-self – Kisi ek grid item ko horizontally align karta hai.
• align-self – Kisi ek grid item ko vertically align karta hai.
• place-self – align-self aur justify-self ka shorthand hai.

CSS Grid vs Flexbox – Kya Difference Hai?

Agar aapko 2D Layout (rows & columns) banana hai, to CSS Grid best hai.
Agar aapko 1D Layout (sirf row ya column) banana hai, to Flexbox better hai.

Quiz: Test Your Knowledge on CSS Grid Property

Bonus: Practical Application!

Aaj hi apne webpage par CSS Grid Property ka istemal karke dekhein!

CSS Grid Property ko sahi tareeke se samajhne ke liye different properties jaise grid-template-columns, grid-template-rows, gap, justify-content, aur align-items ka upayog karein aur apne webpage ke layout ko aur bhi flexible aur responsive banayein.