Grid
Grid Item Placement
grid-column, grid-row, span
💡 Grid placement properties ek seating chart jaisa hai — exactly bata sakte ho konsa guest (item) kaunsi seat (cell) mein baithega, ya kitni seats span karega (jaise ek couple jo 2 seats le).
grid-column/grid-row se exact line numbers specify karke item ko place karte ho (grid lines 1 se start hoti hain, columns/rows ke NAHI, unke BEECH ki lines ke numbers hote hain). span keyword se item ko multiple cells cover karne dete ho.
.item1 {
grid-column: 1 / 3; /* line 1 se line 3 tak — 2 columns span */
}
.item2 {
grid-row: 1 / 3; /* 2 rows span */
}
.item3 {
grid-column: span 2; /* "2 columns span karo, chahe kahi bhi shuru ho" */
}
.featured {
grid-column: 1 / -1; /* poori width (pehli se AAKHRI line tak) */
}📍
Grid placement properties ek seating chart jaisa hai — exactly bata sakte ho konsa guest (item) kaunsi seat (cell) mein baithega, ya kitni seats span karega (jaise ek couple jo 2 seats le).
1 / 2
⚡ झट से Recap
- grid-column/grid-row = exact placement, line numbers se
- span N = N cells cover karo
- 1 / -1 = poori width/height (first se last line tak)
इस page में (2 subtopics)
Grid lines ko numbers ki jagah NAMES bhi de sakte ho — code zyada readable ban jaata hai, especially complex grids mein jaha numbers yaad rakhna mushkil hota.
.container {
display: grid;
grid-template-columns: [sidebar-start] 250px [sidebar-end main-start] 1fr [main-end];
}
.sidebar {
grid-column: sidebar-start / sidebar-end;
}
.main {
grid-column: main-start / main-end;
}Tip: Named lines especially useful hain jab team mein multiple developers same grid ke saath kaam kar rahe hon — line numbers se zyada self-documenting hai.
Multiple items ko same grid cells mein place kar sakte ho (overlap intentionally) — z-index se stacking order control karke, jaise ek image ke upar text overlay.
.image {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
.overlay-text {
grid-column: 1 / 3;
grid-row: 1 / 3; /* SAME cells — overlap ho raha hai */
z-index: 1;
align-self: end; /* text ko bottom mein position karo */
}Tip: Overlapping grid items ek powerful technique hai hero sections/image captions ke liye — Grid ki flexibility isse bina absolute positioning ke achieve karne deti hai.