grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
grid-template-columns: 1fr 2fr; /* 2nd column is twice the 1st */
fr ("अंश") उपलब्ध स्थान वितरित करता है — 1fr 2fr इसे 1:2 में विभाजित करता है। repeat(3, 1fr) तीन समान ट्रैक के लिए shorthand है।
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}
यह एक पंक्ति पूरी तरह से प्रतिक्रियाशील कार्ड ग्रिड बनाता है: प्रत्येक स्तंभ कम से कम 250px है; ब्राउजर जितना संभव हो प्रति पंक्ति फिट करता है और बाकी को लपेटता है — डेस्कटॉप पर 4 स्तंभों से मोबाइल पर 1 तक स्वचालित रूप से जा रहा है। auto-fit + minmax Grid के सबसे प्रिय पैटर्न में से एक है।
.hero {
grid-column: 1 / 3; /* span from column line 1 to 3 (two columns) */
grid-row: 1 / 2;
}
.featured { grid-column: span 2; } /* span 2 columns from its position */
आइटम कई पंक्तियों/स्तंभों तक फैल सकते हैं, पत्रिका-शैली के लेआउट को सक्षम करते हैं जो Flexbox के साथ अजीब हैं।
वे अच्छी तरह से रचना करते हैं — एक ग्रिड सेल स्वयं एक flex कंटेनर हो सकता है।
Grid सबसे शक्तिशाली CSS लेआउट टूल है — यह पूर्ण-पृष्ठ लेआउट और प्रतिक्रियाशील कार्ड ग्रिड को स्वच्छता से संभालता है, अक्सर नेस्टेड-div हैक को प्रतिस्थापित करता है।
auto-fit/minmax प्रतिक्रियाशील पैटर्न अकेले कई मीडिया प्रश्नों की आवश्यकता को समाप्त करता है।