दिलचस्प पोस्ट
क्या डीबगिंग के लिए सार्थक आउटपुट प्रदान करने के लिए जावास्क्रिप्ट टूस्ट्रिंग () फ़ंक्शन को ओवरराइड करना संभव है? जावा जावा में छवि जोड़ें माउसओवर टूलटिप वाला मल्टीर्सरीज़ लाइन चार्ट जावा में स्ट्रिंग के मामले को मैं कैसे उलट कर सकता हूं? JavaFX में 2 रंगों के साथ पृष्ठभूमि? यूनिकोड, यूटीएफ, एएससीआईआई, एएनएसआई प्रारूप मतभेद JSF2 में फ्लैश स्कोप को समझें जावा पास-बाय-संदर्भ कभी नहीं, है ना? … ठीक है? एंड्रॉइड – तालिका मानों से सीएसवी फ़ाइल जेनरेट करें PHP (5.3+) में एक \ (बैकस्लैश) क्या करता है? टर्नेरी ऑपरेटर को एक इंटरपोलेटेड स्ट्रिंग के अंदर कैसे उपयोग करें? एंड्रॉइड स्टूडियो में मौजूदा परियोजना को लाइब्रेरी प्रोजेक्ट में कनवर्ट करें System.in से लिंक स्कैनर को बंद करें जावा में X509 प्रमाणपत्र से CN कैसे निकालें? एक mod_rewrite नियम में लोअरकेस में कनवर्ट करें

एएससीआईआई कला के साथ ग्रिड टेम्पलेट-क्षेत्र काम नहीं कर रहे हैं

कब

grid-template-areas: "....... header header" "sidebar content content"; 

इसमें बदल दिया गया है:

 grid-template-areas: "....... header header" "sidebar header content"; 

सब कुछ अलग हो जाता है

मैं सीएसएस ग्रिड लेआउट के साथ एक ही प्रभाव कैसे प्राप्त कर सकता हूं?

 body { margin: 40px; } .sidebar { grid-area: sidebar; } .content { grid-area: content; } .header { grid-area: header; } .wrapper { display: grid; grid-gap: 10px; grid-template-columns: 120px 120px 120px; grid-template-areas: "....... header header" "sidebar content content"; background-color: #fff; color: #444; } .box { background-color: #444; color: #fff; border-radius: 5px; padding: 20px; font-size: 150%; } .header { background-color: #999; } 
 <div class="wrapper"> <div class="box header">Header</div> <div class="box sidebar">Sidebar</div> <div class="box content">Content</div> </div> 

Solutions Collecting From Web of "एएससीआईआई कला के साथ ग्रिड टेम्पलेट-क्षेत्र काम नहीं कर रहे हैं"

grid-template-areas संपत्ति के साथ एएससीआईआई आर्ट का उपयोग करने के समय, वर्तमान में एक महत्वपूर्ण सीमा है: ग्रिड क्षेत्र आयताकार होना चाहिए

दूसरे शब्दों में, टेट्रिस-आकार वाले ग्रिड वाले क्षेत्रों की अनुमति नहीं है

इस व्यवहार को कल्पना के दो भागों में परिभाषित किया गया है।

7.3। नामांकित क्षेत्र: the grid-template-areas संपत्ति

यदि एक नामित ग्रिड क्षेत्र में एकाधिक ग्रिड कोशिकाएं फैलती हैं, लेकिन उन कक्षों में एक भी भरी हुई आयताकार नहीं होती है, तो घोषणा अमान्य है।

इस मॉड्यूल के भविष्य के संस्करण में गैर-आयताकार या डिस्कनेक्ट किए गए क्षेत्रों की अनुमति हो सकती है।

9. ग्रिड आइटम रखकर

हर ग्रिड आइटम में एक ग्रिड क्षेत्र होता है, ग्रिड के एक आयताकार समूह का सेट है जो कि ग्रिड आइटम में रहता है।

आपके पहले उदाहरण में, सभी ग्रिड क्षेत्रों में आयताकार होते हैं। तो नियम वैध है।

 grid-template-areas: "....... header header" "sidebar content content"; 

आपके दूसरे उदाहरण में, header क्षेत्रों में गैर-आयताकार आकार होता है। तो नियम अमान्य है

 grid-template-areas: "....... header header" "sidebar header content"; 

सौभाग्य से, ग्रिड ग्रिड आइटम बिछाने के लिए ग्रिड कई तरीके प्रदान करता है।

grid-template-areas बजाय, आप लाइन-आधारित प्लेसमेंट का उपयोग कर सकते हैं

 .wrapper { display: grid; grid-gap: 10px; grid-template-columns: 120px 120px 120px; grid-auto-rows: 100px; background-color: #fff; color: #444; } .header { grid-column: 2 / 4; grid-row: 1 / 3; } .sidebar { grid-column: 1 / 2; grid-row: 2 / 3; } .content { grid-column: 3 / 4; grid-row: 2 / 3; } .box { background-color: #444; color: #fff; border-radius: 5px; padding: 20px; font-size: 150%; } .header { background-color: #999; } body { margin: 40px; } 
 <div class="wrapper"> <div class="box header">Header</div> <div class="box sidebar">Sidebar</div> <div class="box content">Content</div> </div>