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

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

<घंटा/>

ग्रिड लेआउट के भीतर क्षेत्रों को सेट करने के लिए, ग्रिड-टेम्पलेट-क्षेत्र संपत्ति का उपयोग करें। आइए अब एक उदाहरण देखें -

उदाहरण

<शैली>. डेमो { ग्रिड-क्षेत्र:नया क्षेत्र;}.ग्रिड-कंटेनर { प्रदर्शन:ग्रिड; ग्रिड-टेम्पलेट-क्षेत्र:'नया क्षेत्र नया क्षेत्र। . ।' 'न्यूएरिया न्यूएरिया। . .'; ग्रिड-गैप:5px; पृष्ठभूमि-रंग:नीला; पैडिंग:5 पीएक्स;}। ग्रिड-कंटेनर> डिव {पृष्ठभूमि-रंग:नारंगी; पाठ-संरेखण:केंद्र; पैडिंग:5px 0; font-size:30px;}

Heading One

कुछ रैंडम नंबर सेट करें

250
120
333
298
645
543
555

आउटपुट

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


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

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

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

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

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

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