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

CSS ग्रिड लेआउट में पंक्तियों का आकार निर्दिष्ट करें

<घंटा/>

ग्रिड-टेम्पलेट-पंक्तियों का उपयोग करें ग्रिड लेआउट में पंक्तियों की संख्या निर्धारित करने के लिए गुण

उदाहरण

<!DOCTYPE html>
<html>
   <head>
      <style>
         .container {
            display: grid;
            background-color: green;
            grid-template-rows: auto auto;
            padding: 20px;
            grid-gap: 20px;
         }
         .container > div {
            background-color: orange;
            border: 2px solid gray;
            padding: 35px;
            font-size: 30px;
            text-align: center;
         }
         .ele1 {
            grid-row-start: 1;
            grid-row-end: 6;
         }
      </style>
   </head>
   <body>
      <h1>Game Board</h1>
      <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 में ग्रिड लेआउट के भीतर क्षेत्र सेट करें

    ग्रिड लेआउट के भीतर क्षेत्रों को सेट करने के लिए, ग्रिड-टेम्पलेट-क्षेत्र संपत्ति का उपयोग करें। आइए अब एक उदाहरण देखें - उदाहरण डिव {पृष्ठभूमि-रंग:नारंगी; पाठ-संरेखण:केंद्र; पैडिंग:5px 0; font-size:30px;}Heading Oneकुछ रैंडम नंबर सेट करें250120333298 645543555

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

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

  1. फ्लेक्सबॉक्स के साथ एडवांस सीएसएस लेआउट

    CSS3 एक लेआउट मोड फ्लेक्सिबल बॉक्स प्रदान करता है, जिसे आमतौर पर फ्लेक्सबॉक्स कहा जाता है। फ्लेक्सबॉक्स (लचीला बॉक्स) CSS3 का एक लेआउट मोड है। इस मोड का उपयोग करके, आप जटिल एप्लिकेशन और वेब पेजों के लिए आसानी से लेआउट बना सकते हैं। इसमें कंटेनर, फ्लेक्स आइटम आदि शामिल हैं। कंटेनर में निम्नलिखित गुण