Grid
Common Grid Patterns
Auto-fit, Responsive Grids
💡 repeat() + auto-fit ek "smart photo wall" jaisa hai — tum sirf bolte ho "har photo kam se kam itni badi honi chahiye", aur wall khud decide karta hai kitni photos ek row mein fit hongi, screen size ke hisaab se.
repeat(auto-fit, minmax(200px, 1fr)) ek famous, bahut powerful Grid pattern hai — automatically responsive grid banata hai bina KISI media query ke. Har column kam se kam 200px hoga, aur available space ko equally share karega, aur columns ki COUNT khud adjust hoti hai screen size ke hisaab se.
.responsive-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
/* Bade screen par: 4-5 columns
Chhote screen par: 1-2 columns
BINA kisi media query ke — Grid khud figure out karta hai! */🖼️
repeat() + auto-fit ek "smart photo wall" jaisa hai — tum sirf bolte ho "har photo kam se kam itni badi honi chahiye", aur wall khud decide karta hai kitni photos ek row mein fit hongi, screen size ke hisaab se.
1 / 2
⚡ Quick Recap
- repeat(auto-fit, minmax(min, 1fr)) = responsive grid, bina media queries ke
- Column count automatically adjust hota hai screen size se
- Bahut popular modern pattern — "intrinsic responsive design"
Is page mein (2 subtopics)
"Holy Grail Layout" (header, footer, 3 columns beech mein — nav, main content, sidebar) ek classic web layout hai jo Grid se bahut simply achieve ho jaata hai — purane float-based approaches mein ye notoriously complex tha.
.layout {
display: grid;
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
min-height: 100vh;
}Tip: Iska naam "Holy Grail" isliye pada kyunki purane CSS (float-based) mein ye layout achieve karna itna tricky tha ki developers legend jaisa treat karte the — Grid se ab literally 10 lines mein ho jaata hai.
True "masonry" layout (Pinterest-jaisa, alag heights ke items tightly packed) CSS Grid mein directly abhi standard nahi hai (browser support varies), lekin grid-auto-rows + span se approximate kiya ja sakta hai.
.masonry {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: 10px; /* chhota base unit */
}
.item {
grid-row: span 20; /* item apni content height ke hisaab se span karta hai */
}Tip: Native masonry (grid-template-rows: masonry) naya CSS feature hai jo gradually rollout ho raha hai browsers mein — future mein ye approximation technique ki zaroorat nahi rahegi.