सभी डायनेमिक पंक्तियों में ग्रिड सेल का विस्तार कैसे करें? [डुप्लिकेट]
संलग्न उदाहरण ठीक से काम करता है, का पहला बच्चा .container
सभी पंक्तियों में फैला हुआ है, लेकिन समस्या यह है कि grid-row-end
मूल्य कई बच्चों की संख्या पर निर्भर है div.container
। क्या यह जादू की निरंतरता (4) के बिना और HTML संरचना को बदलने के बिना करना संभव है। दुर्भाग्य से उपयोग grid-row-end:-1
केवल स्पष्ट ग्रिड के लिए संभव है।
.container {
display:grid;
grid-gap: 0.4em;
}
.container > * {
background-color: lightgray;
}
.container *:first-child {
grid-column: 1;
grid-row-start: 1;
grid-row-end: 4;
}
.container *:not(:first-child) {
grid-column: 2;
}
<div class="container">
<div>IMG</div>
<div>A</div>
<div>B</div>
<div>...</div>
</div>
जवाब
यह पहले से ही पूछा गया था कि पिछली पंक्ति / स्तंभ में एक ग्रिड आइटम स्पैन बनाओ - रोको सी। बुल्जन
यदि आप उचितता को निकालते
gap
हैं और इसके बजायmargin
बच्चों पर भेजते हैं (दूसरी कॉलम में और दूसरी पंक्ति से खड़े होते हैं, तो आप एक हडज मान सेट कर सकते हैं कि संभव संख्याएँ ग्रिड की वास्तविक पंक्तियों की अधिकतम मात्रा से कभी भी मेल नहीं खाएंगी या हो सकती हैं) - जी-साइरिलस
लिंक किए गए प्रश्न ने अंतर सेट को ध्यान में नहीं रखा।
मेरी टिप्पणी का स्निपेट ड्राइंग :
.container {
display:grid;
}
.container > * {
background-color: lightgray;
}
.container *:first-child {
grid-column: 1;
grid-row-start: 1;
grid-row-end: 100;/* use a value that will over the expected numbers of row */
grid-gap:0; /* empty rows will collapse to none height */
grid-auto-rows:auto; /* do not give an height here , else empty rows will use space */
margin-right:0.2em;
}
.container :nth-child(2) {
margin-left:0.2em;
grid-column:2;
}
.container :nth-child(2) ~ div {
grid-column:2;
margin-top:0.4em;
margin-left:0.2em;
}
<div class="container">
<div>IMG</div>
<div>A</div>
<div>B</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
</div>
संपादित करें
यदि आपके साथ जावास्क्रिप्ट ठीक है
let rowsToSpan = document.querySelectorAll(".container>*");
rowsToSpan[0].style.gridRowEnd = rowsToSpan.length
.container {
display: grid;
grid-gap: 0.4em;
}
.container>* {
background-color: lightgray;
}
.container *:first-child {
grid-column: 1;
grid-row-start: 1;
/*grid-row-end: 4;*/
}
.container *:not(:first-child) {
grid-column: 2;
}
<div class="container">
<div>IMG</div>
<div>A</div>
<div>B</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
</div>
से प्रेरित है https://codepen.io/gc-nomade/pen/pRYPwK