CSS Grid Property Kya Hoti Hai?

Introduction to CSS Grid

CSS Grid ek powerful two-dimensional layout system hai jo humein web page ke elements ko rows aur columns me arrange karne ki suvidha deta hai. Flexbox, jo ki one-dimensional hai, ke viparit Grid humein dono dimensions (horizontal aur vertical) par ek saath control deta hai, jisse complex layouts banana bohot aasan ho jaata hai.

1. Grid Container Properties

Ek grid layout banane ke liye, sabse pehle parent element par display: grid; lagana hota hai. Isse woh parent "grid container" ban jaata hai aur uske direct children "grid items" ban jaate hain.

A. grid-template-columns and grid-template-rows

Yeh properties grid ka structure (track sizes) define karti hain.

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

Yahan fr (fractional unit) ka matlab hai available space ka ek hissa. 1fr 1fr ka matlab hai do equal-width columns.

B. gap (or grid-gap)

Yeh property grid items ke beech me space (gutter) add karti hai.

.container {
  gap: 20px 10px; /* row-gap column-gap */
  /* Or just: gap: 20px; for equal gap */
}

2. Grid Item Properties

Yeh properties individual grid items par apply hoti hain unhe grid me place karne ke liye.

A. grid-column and grid-row

Inse aap define kar sakte hain ki ek item kaunsi grid line se shuru hoga aur kahan khatm hoga.

.item-1 {
  grid-column: 1 / 3; /* Starts at line 1, ends at line 3 */
  grid-row: 1 / 2;
}

Aap span keyword ka use bhi kar sakte hain. grid-column: 1 / span 2; ka matlab hai "line 1 se shuru karo aur 2 columns tak span karo".

3. Grid Template Areas

grid-template-areas property layout banane ka ek visual aur intuitive tarika hai. Aap areas ko naam dekar unhe grid me arrange kar sakte hain.

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-areas: 
    "header header"
    "sidebar main"
    "footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

4. Alignment Properties

Grid me items aur content ko align karne ke liye kai properties hain:

• justify-content: Puri grid ko container ke andar horizontally align karta hai.
• align-content: Puri grid ko container ke andar vertically align karta hai.
• justify-items: Grid items ko unke respective cells ke andar horizontally align karta hai.
• align-items: Grid items ko unke respective cells ke andar vertically align karta hai.

.container {
  justify-items: center; /* Sabhi items ko unke cell me center karega */
  align-items: center;
}

CSS Grid vs. Flexbox

Key Takeaways

• CSS Grid two-dimensional layouts (rows and columns) ke liye hai.
• Container par display: grid; lagana zaroori hai.
• grid-template-columns aur grid-template-rows se grid ka structure banta hai.
• fr unit flexible tracks banane ke liye use hoti hai.
• gap property se items ke beech space add hota hai.
• Page layout ke liye Grid aur component alignment ke liye Flexbox ka combination use karna ek common practice hai.