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

CSS grid-auto-rows प्रॉपर्टी का उपयोग

CSS Grid में स्वतः निर्मित रो के आकार को सेट करने के लिए grid-auto-rows प्रॉपर्टी का उपयोग करें।

उदाहरण

<!DOCTYPE html> <html>    <head>       <style>          .container {             display: grid;             grid-auto-rows: 50px;             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>

व्याख्या: grid-auto-rows: 50px प्रत्येक अप्रत्यक्ष रो की ऊंचाई 50px सेट करता है। छह आइटम्स तीन रो में दो-दो कॉलम में व्यवस्थित होते हैं (डिफ़ॉल्ट ऑटो-प्लेसमेंट)।

  1. - CSS grid-area प्रॉपर्टी

    ग्रिड एरिया शॉर्टहैंड grid-area प्रॉपर्टी से grid-row-start, grid-column-start, grid-row-end, grid-column-end एक साथ सेट करें। उदाहरण <!DOCTYPE html> <html> <head> <style> .container { display: grid; background-color: green; grid-template-

  1. - CSS grid-auto-columns प्रॉपर्टी का उपयोग

    grid-auto-columns प्रॉपर्टी का उपयोग ग्रिड में स्वतः बनने वाले कॉलम के डिफ़ॉल्ट आकार को सेट करने के लिए किया जाता है। यह तब लागू होता है जब ग्रिड आइटम स्पष्ट रूप से परिभाषित कॉलम से बाहर होते हैं। उदाहरण <!DOCTYPE html> <html> <head> <style> .container {

  1. - CSS grid-auto-flow प्रॉपर्टी का उपयोग

    grid-auto-flow प्रॉपर्टी का उपयोग ग्रिड में स्वतः रखे गए आइटम्स को शामिल करने के तरीके को नियंत्रित करने के लिए किया जाता है। यह निर्धारित करता है कि आइटम्स पंक्तियों (row) या कॉलम (column) में कैसे प्रवाहित होते हैं। उदाहरण <!DOCTYPE html> <html> <head> <style>