सभी डायनेमिक पंक्तियों में ग्रिड सेल का विस्तार कैसे करें? [डुप्लिकेट]

Dec 01 2020

संलग्न उदाहरण ठीक से काम करता है, का पहला बच्चा .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>

जवाब

G-Cyrillus Dec 01 2020 at 13:35

यह पहले से ही पूछा गया था कि पिछली पंक्ति / स्तंभ में एक ग्रिड आइटम स्पैन बनाओ - रोको सी। बुल्जन

यदि आप उचितता को निकालते 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