Grid: columns, rows, areas

CSS Grid के columns, rows और नामित areas के साथ गैलरी और संपूर्ण पेज लेआउट बनाएँ।

9 मिनट · 3 प्रश्न

Flexbox एक axis के साथ अलाइन करता है; Grid दोनों को एक साथ नियंत्रित करता है। जैसे ही आपका मॉकअप किसी टेबल जैसा दिखे - फ़ोटो गैलरी, डैशबोर्ड, हेडर, साइडबार और फ़ुटर वाला पूरा पेज - Grid ही सही उपकरण है। कंटेनर संरचना को columns और rows में परिभाषित करता है, और चाइल्ड्स अपने आप या ठीक वहीं रख जाते हैं जहाँ आप चुनते हैं।

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

fr (fraction) इकाई उपलब्ध जगह को बाँटती है: 1fr 2fr दो columns बनाता है जहाँ दूसरा दोगुना चौड़ा होता है। प्रतिशत के विपरीत, fr आपकी ओर से बिना किसी गणना के gap का ध्यान रखता है। किसी एलिमेंट को उभारने के लिए, उसे grid-column और grid-row के साथ कई ट्रैक्स में फैलाएँ।

.featured {
  grid-column: span 2;
  grid-row: span 2;
}

किसी पूरे पेज के लिए, grid-template-areas आपको मॉकअप को सीधे CSS में बनाने देता है। हर स्ट्रिंग ग्रिड की एक row को दर्शाती है, हर शब्द एक नामित area को। फिर एक चाइल्ड खुद को grid-area के साथ रखता है। परिणाम किसी वास्तुकार के ब्लूप्रिंट की तरह पढ़ा जाता है: यह किसी पेज लेआउट के लिए सबसे पठनीय तरीका है।

.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  min-height: 100vh;
}

.site-header { grid-area: header; }
.site-nav { grid-area: sidebar; }
.site-main { grid-area: main; }
.site-footer { grid-area: footer; }

ज्ञान जांच

सुनिश्चित करें कि आपको इस पाठ के मुख्य बिंदु याद हैं।

1. grid-template-columns: 1fr 2fr में fr इकाई क्या दर्शाती है?
   • कंटेनर की उपलब्ध जगह का एक अंश
   • स्क्रीन चौड़ाई का एक प्रतिशत
   • पिक्सेल में व्यक्त एक निश्चित आकार
2. कौन सी घोषणा बराबर चौड़ाई के तीन columns बनाती है?
   • grid-template-columns: 3
   • grid-template-columns: repeat(3, 1fr)
   • grid-columns: 1fr 3
3. grid-template-areas किस काम आता है?
   • ग्रिड areas को नाम देना जहाँ चाइल्ड्स grid-area के ज़रिए खुद को रखते हैं
   • ग्रिड के columns का आकार परिभाषित करना
   • सेल्स के बीच एनिमेशन बनाना