होली ग्रेल लेआउट

इस क्लासिक होली ग्रेल लेआउट के लिए, हेडर, फ़ुटर, लेफ़्ट साइडबार, राइट साइडबार, और मुख्य कॉन्टेंट शामिल हैं. यह पिछले लेआउट जैसा ही है, लेकिन अब साइडबार के साथ!

कोड की एक लाइन का इस्तेमाल करके इस पूरे ग्रिड को लिखने के लिए, grid-template प्रॉपर्टी का इस्तेमाल करें. इसकी मदद से, लाइन और कॉलम, दोनों को एक साथ सेट किया जा सकता है.

प्रॉपर्टी और वैल्यू का जोड़ा है: grid-template: auto 1fr auto / auto 1fr auto. स्पेस से अलग की गई पहली और दूसरी सूचियों के बीच का स्लैश, पंक्तियों और कॉलम के बीच का ब्रेक होता है.

.parent {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
}

पिछले उदाहरण की तरह ही, हेडर और फ़ुटर में अपने-आप साइज़ का कॉन्टेंट था, इसलिए यहां बाईं और दाईं ओर मौजूद साइडबार को बच्चों के साइज़ के हिसाब से अपने-आप साइज़ में बदल दिया जाता है. हालांकि, इस बार यह वर्टिकल (ऊंचाई) के बजाय हॉरिज़ॉन्टल साइज़ (चौड़ाई) है.

<div class="parent">
    <header class="section coral">Header</header>
    <div class="left-side section blue">Left Sidebar</div>
    <main class="section green"> Main Content</main>
    <div class="right-side section yellow">Right Sidebar</div>
    <footer class="section coral">Footer</footer>
  </div>

        .parent {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
}

header {
  padding: 2rem;
  grid-column: 1 / 4;
}

.left-side {
  grid-column: 1 / 2;
}

main {
  grid-column: 2 / 3;
}

.right-side {
  grid-column: 3 / 4;
}

footer {
  grid-column: 1 / 4;
}