9
मैं एक सीएसएस ग्रिड कंटेनर को एक पृष्ठ ऐप के लिए डिवाइस स्क्रीन की पूरी चौड़ाई और ऊंचाई कैसे ले सकता हूं? संशोधित उदाहरण मोज़िला से है: Firefox documentationडिवाइस की पूर्ण स्क्रीन भरने के लिए बल सीएसएस ग्रिड कंटेनर
.wrapper {
display: grid;
border-style: solid;
border-color: red;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
}
.one {
border-style: solid;
border-color: blue;
grid-column: 1/3;
grid-row: 1;
}
.two {
border-style: solid;
border-color: yellow;
grid-column: 2/4;
grid-row: 1/3;
}
.three {
border-style: solid;
border-color: violet;
grid-row: 2/5;
grid-column: 1;
}
.four {
border-style: solid;
border-color: aqua;
grid-column: 3;
grid-row: 3;
}
.five {
border-style: solid;
border-color: green;
grid-column: 2;
grid-row: 4;
}
.six {
border-style: solid;
border-color: purple;
grid-column: 3;
grid-row: 4;
}<html>
<div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
<div class="six">Six</div>
</div>
</html>
दुख की बात है, यह सामान्य मामले में काम नहीं करेगा, (यानी यदि आप नहीं जानते कि आपका कंटेनर शीर्ष स्तर पर है या नहीं) क्योंकि vw और vh विंडो के आकार के सापेक्ष हैं, भले ही घोंसला आपका ग्रिड है – Michael
^यह सही है। यह डिवाइस की चौड़ाई/ऊंचाई के लिए है, न कि घोंसले वाले कंटेनर जो उनके माता-पिता की पूर्ण चौड़ाई/ऊंचाई तक फैले हुए हैं। नेस्टेड कंटेनर को बच्चों के लिए% या ईएमएस जैसे उत्तरदायी सीएसएस चयनकर्ताओं के साथ उचित आकार के माता-पिता कंटेनरों की आवश्यकता होगी। – Illdapt