ग्रिड बेसिक्स

display: grid

पेरेंट पर display: grid, फिर grid-template-columns और grid-template-rows ट्रैक आकार तय करते हैं। बच्चे अपने-आप सेल में फिट हो जाते हैं।

बेसिक 3-कॉलम ग्रिड

1fr बची हुई जगह को बराबर हिस्सों में बाँटता है।

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

आइटम रखना

gap सेल के बीच स्पेसिंग तय करता है। grid-column: 1 / 3 और grid-row: 2 / 4 आइटम को खास ट्रैक लाइनों के बीच रखते हैं, जिससे वह कई सेल में फैल सके।

त्वरित जाँच: ग्रिड में `fr` यूनिट क्या दर्शाती है?

• पिक्सेल की एक तय संख्या
• उपलब्ध जगह का एक अंश
• फ़ॉन्ट साइज़ का प्रतिशत