# आम ग्रिड पैटर्न — सीएसएस

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

> ऑटो-रिस्पॉन्सिव ग्रिड और नामित क्षेत्र।

## ऑटो-फिट रिस्पॉन्सिव ग्रिड

कोई मीडिया क्वेरी नहीं चाहिए — व्यूपोर्ट सिकुड़ने पर कॉलम अपने-आप बदल जाते हैं।

```css
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
```

## नामित ग्रिड क्षेत्र

`grid-template-areas` पेज के ASCII चित्र की तरह पढ़ी जाती है।

```css
.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
}
.sidebar { grid-area: sidebar; }
.header  { grid-area: header; }
.main    { grid-area: main; }
```

## ग्रिड बनाम फ्लेक्सबॉक्स

पूरे पेज के द्वि-आयामी लेआउट (पंक्तियाँ AND कॉलम) के लिए **Grid** उपयोग करें; एक-आयामी व्यवस्था (आइटम की एक ही पंक्ति या कॉलम) के लिए **Flexbox**। दोनों साथ अच्छे से काम करते हैं।