आम ग्रिड पैटर्न

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

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

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

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

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

.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। दोनों साथ अच्छे से काम करते हैं।