Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> CSS

CSS ग्रिड के लिए डिफ़ॉल्ट पंक्ति आकार सेट करें


grid-auto-rows प्रॉपर्टी

grid-auto-rows प्रॉपर्टी का उपयोग पंक्ति के लिए डिफ़ॉल्ट आकार सेट करने के लिए करें।

उदाहरण

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        display: grid;
        grid-auto-rows: 60px;
        grid-gap: 10px;
        background-color: red;
        padding: 10px;
      }
      .container>div {
        background-color: yellow;
        text-align: center;
        padding:10px 0;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="ele1">1</div> <div class="ele2">2</div> <div class="ele3">3</div>
      <div class="ele4">4</div> <div class="ele5">5</div> <div class="ele6">6</div>
    </div>
  </body>
</html>

  1. - CSS के साथ ग्रिड आइटम्स को नाम दें

    CSS में ग्रिड आइटम्स को नाम देने के लिए, grid-area प्रॉपर्टी का उपयोग grid-template-areas प्रॉपर्टी के साथ किया जाता है। यह लेआउट को विज़ुअल रूप से परिभाषित करने का एक सहज तरीका प्रदान करता है। उदाहरण <!DOCTYPE html> <html> <head> <style> .container {

  1. CSS में ग्रिड लेआउट के भीतर क्षेत्र सेट करें CSS में ग्रिड लेआउट के भीतर क्षेत्र सेट करें

    ग्रिड लेआउट के भीतर क्षेत्र सेट करने के लिए grid-template-areas प्रॉपर्टी का उपयोग करें। यह नामित ग्रिड क्षेत्रों को परिभाषित करके लेआउट को विज़ुअल रूप से मैप करता है। उदाहरण <!DOCTYPE html> <html> <head> <style> .demo { grid-area: newArea; } .grid-conta

  1. CSS में ग्रिड टेम्पलेट प्रॉपर्टी सेट करें CSS में ग्रिड टेम्पलेट प्रॉपर्टी सेट करें

    ग्रिड टेम्पलेट प्रॉपर्टी सेट करने के लिए, आपको पंक्तियों और कॉलम की संख्या निर्दिष्ट करनी होगी। इसके साथ, ग्रिड लेआउट के भीतर क्षेत्र भी सेट करें। ग्रिड टेम्पलेट के लिए सिंटैक्स निम्नानुसार है: grid-template: none | grid-template-rows / grid-template-columns | grid-template-areas | initial | inherit