CSS Grid — Basics
CSS Grid "two-dimensional" layout system hai — Flexbox ke ulat (jo ek row YA column handle karta hai), Grid rows AUR columns dono ko simultaneously control karta hai. Complex layouts (jaise poore page layouts, magazine-style designs) ke liye Grid natural fit hai.
display: grid parent ko grid container banata hai. grid-template-columns/grid-template-rows se rows/columns ki size define karte ho — fr unit ("fraction") available space ko proportionally divide karta hai.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
grid-template-rows: 100px 200px; /* 2 rows, specific heights */
gap: 20px;
}
/* Items automatically grid cells mein fill hote hain, left-to-right, top-to-bottom */- display: grid = two-dimensional layout (rows + columns dono)
- grid-template-columns/rows = structure define karo
- fr unit = available space ko proportion mein divide karta hai
Rule of thumb: ek dimension (row YA column) mein layout chahiye → Flexbox. Dono dimensions (rows AUR columns) ek saath control karni hain → Grid. Real projects mein often DONO combine hote hain — Grid poora page layout ke liye, Flexbox chhote components (jaise ek card ke andar) ke liye.
/* Poora page layout — Grid: */
.page {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
}
/* Ek card ke andar content — Flexbox: */
.card {
display: flex;
flex-direction: column;
gap: 10px;
}Explicit grid wo hai jo tumne grid-template-columns/rows se define kiya. Agar items explicit grid se zyada hon, browser automatically extra rows/columns banata hai ("implicit grid") — grid-auto-rows/grid-auto-columns se unka size control kar sakte ho.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* explicit: 3 columns */
grid-auto-rows: 100px; /* implicit rows ka size */
}
/* Agar 10 items hain 3-column grid mein,
browser automatically 4 rows banayega (implicit), har ek 100px */