CSS Grid Layout kya hai?

CSS Grid layout 2D grid system provide karta hai jisme aap rows aur columns dono me elements ko organize kar sakte hain. Ye modern aur flexible web layouts ke liye bahut powerful tool hai.

Grid Container aur Grid Items

CSS Grid me ek parent element jisme display: grid; laga hota hai, use Grid Container kehte hain. Us container ke direct children Grid Items hote hain.

Basic Example

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}
.grid-item {
  background-color: #db1d29;
  color: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  font-weight: 700;
}

Important Grid Properties

grid-template-columns: Columns ki number aur width define karta hai.
grid-template-rows: Rows ki number aur height define karta hai.
grid-gap: Rows aur columns ke beech ka gap set karta hai.
grid-column-start / grid-column-end: Item ke grid me start aur end position batata hai.
grid-row-start / grid-row-end: Item ke row me start aur end position batata hai.
justify-items aur align-items: Items ko grid cells ke andar horizontally aur vertically align karta hai.

Summary

CSS Grid layout se complex aur responsive 2D layouts design karna bahut easy ho jata hai. Ye modern web development ka ek essential tool hai jo Flexbox ke saath milke best results deta hai.