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

CSS ग्रिड में डिफ़ॉल्ट कॉलम आकार कैसे सेट करें

<घंटा/>

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

आप CSS के साथ ग्रिड-ऑटो-कॉलम प्रॉपर्टी को लागू करने के लिए निम्न कोड को चलाने का प्रयास कर सकते हैं

उदाहरण

<!DOCTYPE html>
<html>
   <head>
      <style>
         .container {
            display: grid;
            grid-auto-columns: 100px;
            grid-gap: 10px;
            background-color: blue;
            padding: 10px;
         }
         .container>div {
            background-color: #E5E7E9;
            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 में ग्रिड टेम्पलेट गुण सेट करें

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

  1. सीएसएस के साथ 4-कॉलम लेआउट ग्रिड कैसे बनाएं?

    CSS के साथ 4-स्तंभ लेआउट ग्रिड बनाने के लिए, कोड इस प्रकार है - उदाहरण body { font-family:Segoe UI , ताहोमा, जिनेवा, वर्दाना, सेन्स-सेरिफ़; } * {बॉक्स-साइज़िंग:बॉर्डर-बॉक्स; } .प्रथम, .सेकंड, .तीसरा, .चौथा {फ्लोट:बाएं; चौड़ाई:25%; रंग सफेद; पैडिंग:10px; ऊंचाई:500 पीएक्स; पाठ-संरेखण:केंद्र; } .पहले

  1. सीएसएस फ्लेक्स के साथ कॉलम डीआईवी को बाएं-केंद्र-दाएं के रूप में कैसे संरेखित करें

    फ्लेक्स कंटेनर की वस्तुओं को उसके चारों ओर स्थान वितरित करके उसके मुख्य अक्ष के साथ संरेखित करने के लिए, हम CSS की जस्टिफाई-कंटेंट संपत्ति का उपयोग करते हैं। सिंटैक्स CSS जस्टिफाई-कंटेंट प्रॉपर्टी का सिंटैक्स इस प्रकार है - Selector {    display: flex;    justify-content: /*valu