# ग्रिड बेसिक्स — सीएसएस

Source: https://www.geekswithgeeks.com/hi/css/css-grid-basics

> पंक्तियों और कॉलम के साथ द्वि-आयामी लेआउट।

## display: grid

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

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

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

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

## आइटम रखना

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

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

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

*Answer:* उपलब्ध जगह का एक अंश. 1fr का मतलब है "तय आकार के ट्रैक रखे जाने के बाद बची जगह का एक हिस्सा"।