सीएसएस ग्रिड लेआउट पंक्ति ऊंचाई मुद्दा

Question

मेरे पास एक सीएसएस ग्रिड लेआउट है जिसमें मैं कुछ (मध्यम 3) पंक्तियों को अपने अधिकतम आकार तक फैला बनाना चाहता हूं। मैं शायद flex-grow: 1 फ्लेक्सबॉक्स के साथ एक संपत्ति की तलाश में हूं लेकिन मुझे कोई समाधान नहीं मिल रहा है।

नोट: यह केवल Electron ऐप के लिए है, इसलिए ब्राउज़र संगतता वास्तव में चिंता का विषय नहीं है।

मैं निम्नलिखित सीएसएस ग्रिड लेआउट है:

.grid { 
 
    display: grid; 
 
    grid-template-columns: 1fr 1.5fr 1fr; 
 
    grid-gap: 10px; 
 
    height: calc(100vh - 10px); 
 
} 
 

 
.grid .box { 
 
    background-color: grey; 
 
} 
 

 
.grid .box:first-child, 
 
.grid .box:last-child { 
 
    grid-column-start: 1; 
 
    grid-column-end: -1; 
 
} 
 

 
/* These rows should 'grow' to the max height available. */ 
 
.grid .box:nth-child(n+5):nth-child(-n+7) { 
 
    grid-column-start: 1; 
 
    grid-column-end: -1; 
 
}

<div class="grid"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
</div>

कौन सा निम्नलिखित ग्रिड बनाता है:

जब बक्से में से कोई भी किसी भी सामग्री होती है मैं कुछ इस तरह देखने के लिए ग्रिड चाहते हैं:

Answer 1

Related posts ने मुझे (सरल) जवाब दिया।

स्पष्ट रूप से autogrid-template-rows संपत्ति पर मूल्य ठीक वही करता है जो मैं ढूंढ रहा था।

.grid { 
    display:grid; 
    grid-template-columns: 1fr 1.5fr 1fr; 
    grid-template-rows: auto auto 1fr 1fr 1fr auto auto; 
    grid-gap:10px; 
    height: calc(100vh - 10px); 
} 

Answer 2

आपको लगता है कि नीचे काम करेगा, लेकिन ऐसा नहीं है। मैं यह सिर्फ मामले किसी में टिप्पणी करने के लिए क्यों चाहते हो सकता है पोस्ट ...

body{ 
 
    height:100%; 
 
    margin: 0; 
 
} 
 
main{ 
 
    display: grid; 
 
    grid-template-columns: 1fr 1fr; 
 
    grid-template-rows: 20vh 60vh 20vh; 
 
    grid-gap: 4px 4px; 
 
} 
 

 
div{ 
 
    height:100%; 
 
    width:100%; 
 
    background: grey; 
 
}

<main> 
 
<div>1</div> 
 
<div>2</div> 
 
<div>3</div> 
 
<div>4</div> 
 
<div>5</div> 
 
<div>6</div> 
 
<main>